:hover with <span> elements

O

4

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?

Oba answered 28/11, 2008 at 18:34 Comment(5)

what is "top" in the CSS selectors? if it's an element ID, it should be "#top" – Highwayman 28/11, 2008 at 18:38

It didn't print the # sign, it is there in my CSS though. – Oba 28/11, 2008 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 – Oba 28/11, 2008 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? – Hautegaronne 28/11, 2008 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. – Sphacelus 28/11, 2008 at 20:21

H

11

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

Highwayman answered 28/11, 2008 at 19:41 Comment(0)

P

5

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

Precedent answered 19/9, 2012 at 13:40 Comment(1)

good point... inline text, for example, doesn't need to be block. – Rorie 30/9, 2012 at 23:43

C

0

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

Comose answered 28/11, 2008 at 18:45 Comment(0)

L

0

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

Loesceke answered 28/11, 2008 at 18:51 Comment(0)

Recommended topics

Hot tags