Reputation: 5
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?*
Upvotes: 0
Views: 4781
Reputation: 9975
In your script, instead of using img.style.visibility, use
img.style.display="none";
and
img.style.display="block";
make sure you also remove the visibility='hidden' attribute from your img tag or it won't work
There is a space between getElementById and ('img'), remove that and try again.
Upvotes: 0
Reputation: 51211
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.
Upvotes: 1