CSS - using :hover on elements other than links...

Question

Hey,

For ages now my site has had a catalogue where the small image is directly within a link within a div. The link must only be around the image - but I do not want to use the + selector since this is not supported by some versions of IE (IE6 onwards I think it needs to support). The div has class "ImageHoverSpan" (it used to be a Span on an older layout, I just havent bothered renaming the class). There is another div, with class "ImageOuterPanel", on the same level as the link (i.e. a direct child of the ImageHoverSpan).

I have the following classes defined:

  .ImageHoverSpan .ImageOuterPanel {
    display: none; }
  .customer .ImageHoverSpan:hover .ImageOuterPanel {
    display: block; }

This certainly used to work fine as far as I can remember - on all browsers. I am about to launch the new version of the website into testing, but I just noticed today that, in Opera 10.60, the image panel (ImageOuterPanel) is displaying straight away on hover over the ImageHoverSpan, but it takes anything between 1 second and.. well.. never to disappear when the mouse leaves the div.

I know using :hover on anything other than links can slow performance in IE - but this is Opera. In Firefox (3.6) this works absolutely fine - it appears and disappears as it should.

Has anyone got any ideas about what could be causing this? Anyone had this problem before?

Thank you.

Regards,

Richard

Answer 1

Well I have found an answer. I asked the question on the Opera forums, and a user posted back that I could have an Opera stylesheet which keeps the elements visible but sets opacity to 0 or 100 instead. This works - the elements appear and disappear instantly.

Richard