CODEWITHSUNDEEP
cssimagehoverrollover
user39980
user39980

Reputation:

:hover with <span> elements

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?

Upvotes: 6

Views: 41427

Answers (4)

ZeeshanIqbal
ZeeshanIqbal

Reputation: 61

Write <!DOCTYPE html> at the first line of your HTML document. Hover support should be enabled for all types of elements.

Upvotes: 5

defeated
defeated

Reputation: 1084

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;
}

Upvotes: 11

Greg
Greg

Reputation: 321698

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

Upvotes: 0

Claudio
Claudio

Reputation: 5980

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

Upvotes: 0

Related Questions