Geek Answers Handbook

: hover with <span> elements

I work 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 not get :hover to work correctly? Not sure why, are there any suggestions?

+6
css image hover
source share
4 answers

I believe the problem is that the SPAN elements are displayed by default by default - this means that they do not have 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; }
+10
source share

Write <!DOCTYPE html> in the first line of your HTML document. Hover support must be enabled for all item types.

+5
source share

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

0
source share

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

0
source share

More articles:


All Articles