Extended css sprites do not work with: hover?

Question

I just came across this css sprite extension article which allows you to write a trick with foreground images. I tried using this technique on: hover, but it does not work in IE and Opera. See My attempt to use this technique for the menu here: http://www.kavoir.com/examples/jenny-css-sprites/menu.html

In FF and Safari, it works correctly, but just does not work at all in IE and Opera. The code has been changed in several ways, but it still does not work. Maybe this is not possible?

I tried to ask the author, but she deleted my comment.

Any idea how to make this work in all browsers?

Update: Thanks for the answers, but: hover IS, so I believe that all IE browsers should work out the effects. Therefore, the problem can most likely be related to the description of the clip property.

I just want to make sure that: hover works correctly with the clip. It seems so far this is not the case.

Answer 1

All the described technique seems problematic to me.

Jennifer points out:

• You cannot attach alternate text to sections for accessibility purposes.
• CSS Sprite and IE6 PNG fix incompatible
• Images will not be printed on printouts unless the client option for printing background images is selected (this is bad for logos and menus, etc.).
• For images on pages (in fact, these are not background images) it seems semantically bad to hide the image in CSS.

In 1, given that these are background images and not semantically images in themselves, I believe that the right approach is to put this text directly in the markup and hide it with CSS, and not vice versa.

Number 2 is valid, but not the end of the world. Acting on 3 is an abuse of imho - if the user does not want to print background images, why do you force it? Again, this returns to semantic interpretation.

Number 4 I completely agree with this, but if you just hide the image in the sprite conglomerate, anyway, what do you get? You can discuss this, but <img> has a semantic meaning representing a resource with a URI, and therefore the URI must be distinct, independent of the interpreted CSS. View / Copy / Save Image will adversely affect this.

It also seems to respond rather slowly in my FF (which is admittedly prone to tab-abuse), I believe that circumcising mathematicians take little effort.

In short, I believe that the existing background-image / position technique is superior.

Answer 2

OK, this is what my research found out (and correct me if I am wrong): IE supports: hover, but apparently it will not apply to child elements.

So, I created a workaround using overflow: hidden and fields using current markup. I would suggest that you can still use the clip property, but this might require a different element (maybe not, though). The solution is in here and seems to work correctly in both FF and IE6 (not tested in other browsers).

In addition, I would like to turn to annakata, saying that the menu buttons and logos were historically not background images and were printed on prints, so css-scripting changed this behavior (in favor of performance).

Answer 3

What version of IE are you using?

:hover should not work on old IE (it is assumed that IE7 supports this pseudo-class).

This article " IE Hover Fix " lists some of the methods used to work correctly :hover , for example, the proprietary expression function of IE, or HTC (HTML component).

Answer 4

In fact, IE supports: hover for links. I believe the problem here is using the "Clip" css property. I would suggest looking for another solution, this is a common thing, and it may take longer to debug it to try a different approach.

Answer 5

This is how I usually do my CSS sprites without an IMG tag — then in the A tag:

HTML:

 <div class="menu"> <a href="#">foo</a> <a href="#">foo</a> </div> 

CSS

 /* you need to specify its height and width so that they fit with the part of the sprite you want to show */ .menu a{display:block;width: 100px; height: 100px; float:left; margin-right: 10px; text-indent: -9999px;} /* the background-position is set to top. */ .menu a{background: url(../images/whatever.png) no-repeat top center;} /* the background-position is set to bottom. */ .menu a:hover{background-position: bottom center;} 

your whatever.png file will be 200 pixels high with both states.

thats it