Home/ Questions/Q 7658563
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T13:13:06+00:00

This is my attempt to make a menu with a fading background when the

  • 0

This is my attempt to make a menu with a fading background when the mouse hovers over the menu item. It works in Firefox (10.0.2), but it does not work in Chrome (17.0.963.79). I was under the impression this would work using Chrome version 17. What am I missing?

<html>
<head>
<style type="text/css">
<!--
div.Menu{
    border: solid black 4px;
    width: 200px;
    background-color: #ffffff;
}

div.MenuItem{
    border: solid black 3px;
    margin: 3px;
    height: 20px;
    background-color: #ff0000;
    transition: background-color 200ms ease-out;
    -moz-transition: background-color 200ms ease-out; 
    -webkit-transition: background-color 200ms ease-out;
    -o-transition: background-color 200ms ease-out;
}

div.MenuItem:hover{
    background-color: #ffff00;
}
-->
</style>
</head>
<body>
    <div class="Menu">
        <a href=""><div class="MenuItem"></div></a>
        <a href=""><div class="MenuItem"></div></a>
        <a href=""><div class="MenuItem"></div></a>
        <a href=""><div class="MenuItem"></div></a>
        <a href=""><div class="MenuItem"></div></a>
        <a href=""><div class="MenuItem"></div></a>
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is a reported problem with Chrome 16 and 17. If you set the <a href="#"> then it works fine, it’s a problem with the :visited tag in Chrome. It is noted on chromium.

    After some experimentation, it seems to have something to do with <a href> being "visited". Non-visited links fade properly, and I think divs work fine too.

    Source

    For example, if you check out the fiddle here http://jsfiddle.net/joshuamartin/hRAu4/1/ you’ll see it works fine.

    e: It has been fixed in the v18 beta, so it shouldn’t be an issue around for much longer!

    • 0