user1581488
user1581488

Reputation: 5

Simple Mouseover not Working in Chrome?

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

Answers (2)

Asciiom
Asciiom

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

Christoph
Christoph

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

Related Questions