CSS hover property ignored

views:

answers:

CSS hover property ignored

Can anyone see why this isnt working? For this example the box should turn white when hovered over.

    <style type="text/css" media="screen">
    .center {margin: 0 auto;}
    .box{width: 250px; height: 250px; display: block;background: #000; border: 1px solid white; float: left}
    .inner {width:175px; height: 175px; display: block; margin-top: 15%; margin-left: 15%; background: #fff;position: relative}
    .boxLink{position: absolute; left: 0; right: 0; margin-left: auto; width: 100%; text-align: center; line-height: 175px; font-size: 30px}  
    a:link.boxLink{color:#000; background: yellow}
    a:visited.boxLink{color:#000; background: yellow}
    a:hover.boxlink {color:#fff; background: white}
    a:active.boxLink {color:#000; background: green}
    </style>
    </head>
    <body>
    <div id="container">
    <div class="box">
    <div class="inner">
    <a class="boxLink" href="#">about</a>
    </div>
    </div>
    </div>

You need to put the class name before :hover:

a.boxLink:link{color:#000; background: yellow}
a.boxLink:visited{color:#000; background: yellow}
a.boxLink:hover {color:#fff; background: white}
a.boxLink:active {color:#000; background: green}

While my suggestion is good practice, you actually made a spelling error on that hover line:

 a.boxlink:hover {color:#fff; background: white}

CSS is case-sensitive, you need to make that l uppercase.

Jacob Relkin 2010-07-18 07:46:56

ack@! I am tired. Thanks! Interesting that the other pseduoClasses worked with the wrong format.. only hover was ignored.

zac 2010-07-18 07:48:46

Where does it say that in the specification? Or are you talking about a bug in a specific browser?

David Dorward 2010-07-18 07:49:16

@David Dorward you're right [CSS2.1 Selectors syntax](http://www.w3.org/TR/CSS2/selector.html#selector-syntax) says "A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, **in any order**."

Felipe Alsacreations 2010-07-18 08:28:07

ansaurus

tags:

views:

answers:

CSS hover property ignored

related questions