6

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?

Sarjan Desai
  • 3,683
  • 2
  • 19
  • 32
  • what is "top" in the CSS selectors? if it's an element ID, it should be "#top" – defeated Nov 28 '08 at 18:38
  • It didn't print the # sign, it is there in my CSS though. –  Nov 28 '08 at 18:45
  • @RoBorg - Thank you for the edit, I just logged back in to do the same thing, since two people thought I did forget the "#" Thanks again –  Nov 28 '08 at 18:50
  • I'm not quite sure what you are trying to achieve. Do you want the background image to change only when you hover over the corners? – foxy Nov 28 '08 at 19:15
  • This makes little sense, as foxy said. Hard to help you make it work right when "right" isn't defined and isn't clear at all. – sliderhouserules Nov 28 '08 at 20:21

4 Answers4

10

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;
}
defeated
  • 1,064
  • 11
  • 13
5

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

ЯegDwight
  • 24,821
  • 10
  • 45
  • 52
ZeeshanIqbal
  • 61
  • 1
  • 2
0

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

Claudio
  • 5,740
  • 5
  • 33
  • 40
0

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

Greg
  • 316,276
  • 54
  • 369
  • 333