CODEWITHSUNDEEP
htmlcss
b10hazard
b10hazard

Reputation: 7809

fading background does not work in Chrome

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>

Upvotes: 0

Views: 279

Answers (1)

user1211577
user1211577

Reputation:

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!

Upvotes: 3

Related Questions