:hover with <span> elements

css image hover rollover
Coughlin picture Coughlin · Nov 28, 2008 · Viewed 40.1k times · Source

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?

Answer

defeated picture defeated · Nov 28, 2008

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

Related questions

Changing image on hover with CSS/HTML

I have this problem where I have set an image to display another image when the mouse hovers over, however the first image still appears and the new one doesn't change height and width and overlaps the other one. I'm …

Read More
How to make in CSS an overlay over an image?

I am trying to achieve something like this: When I hover over an image, I would like to put on that image this dark color with some text and the icon. I am stuck here. I found some tutorials but …

Read More
CSS transition effect makes image blurry / moves image 1px, in Chrome?

I have some CSS that on hover, a CSS transition effect will moves a div. The problem, as you can see in the example, is that the translate transition has the horrible side effect of making the image in the …

Read More