Question

Okay, so I am working on a game-center. I got this cool idea so when I mouseover a hyperlink it shows a scary face (just for kickz & gigglez);

The problem is, it works perfectly in Firefox, but not Google Chrome? The demo is over here:

http://bouncygames.org/games/scary/

Please help… 🙁

*My Question: * *How come this is not working in Chrome, and how can I fix this?*

Answer 1

You don’t need any javascript whatsoever, just use this css-declaration and it will work perfectly in all browsers:

#img{
   display:none;
}

a:hover ~ #img{
   display:block;
}

To make it more specific (so that it will not trigger on all hovered anchors), put a class onto your anchor and write ( e.g. .scary:hover ~ #img ).

Don’t use onmouseover and onmouseout these are considered bad coding practice for several reasons.
Also, don’t use the center tag, but use the css-declaration text-align:center instead.