简单的鼠标悬停不适用于Chrome？

Question

好的，所以我正在开发一个游戏中心。我得到了这个很酷的主意，所以当我将鼠标悬停在一个超链接上时，它会显示一张可怕的脸（仅适用于kickz＆amp; gigglez）;

问题是，它在Firefox中运行得很好，但谷歌Chrome却不行？演示结束了：

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

请帮助...... :(

* 我的问题：* *为什么这在Chrome中不起作用，我该如何解决？*

Answer 1

您不需要任何javascript，只需使用此css声明，它将在所有浏览器中完美运行：

#img{
   display:none;
}

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

为了使它更具体（以便它不会在所有悬停的锚点上触发），将一个类放到你的锚上并写入（例如.scary:hover ~ #img）。

不要使用onmouseover和onmouseout这些被认为是错误的编码实践有几个原因 另外，请勿使用center标记，而应使用css声明text-align:center。

Answer 2

在您的脚本中，使用

而不是使用img.style.visibility

img.style.display="none";

和

img.style.display="block";

请确保您还从img标记中删除visibility ='hidden'属性，否则无效

getElementById和（'img'）之间有一个空格，删除它并重试。