:hover with <span> elements

Question

Hey,

I am working with:

#top ul li.corner span.right-corner:hover
{
    background-image:url("images/corner-right-over.gif");
    width:4px;
    height:15px;
    float:left;
}

#top ul li.corner span.left-corner:hover
{
    background-image:url("images/corner-left-over.gif");
    float:left;
    width:4px;
    height:15px;
}

And I can't seem to get the :hover working properly? Not sure why, does anyone have any suggestions?

Thanks,

Ryan

Answer 1

As the commenter noted, "top" is not a valid selector. It should be "#top" or ".top"

Answer 2

I have that, the editor didn't render the # sign.

Answer 3

Are you testing in IE? IE7 and below only support :hover on <a> (not sure about IE8)

Answer 4

Hey RoBerg, I am in FF 3.0, but i did not know that about IE. Maybe I can make them each classes and use jQuery to add the class on mouseover, is there any pure CSS method?

Thanks,

Ryan

Answer 5

I believe the problem is that SPAN elements display inline by default - meaning they have no height and width. Try explicitly making them block level elements by adding:

#top ul li.corner span.right-corner, #top ul li.corner span.left-corner
{
    display: block;
}