:hover with <span> elements

StackOverflow https://stackoverflow.com/questions/326396

  •  11-07-2019
  •  | 
  •  

Question

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?

Was it helpful?

Solution

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

OTHER TIPS

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

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

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top