javascript - 単純なマウスオーバーがChromeで機能しませんか？

Question

さて、私はゲームセンターに取り組んでいます。私はこのクールなアイデアを思いついたので、ハイパーリンクの上にマウスを置くと、怖い顔が表示されます（kickzとgigglezの場合のみ）。

問題は、Firefoxでは完全に機能しますが、GoogleChromeでは機能しないということです。デモはここにあります：

助けてください... ：（

*私の質問：* *これがChromeで機能しないのはなぜですか、またこれを修正するにはどうすればよいですか？*

score 1 · Accepted Answer

JavaScript はまったく必要ありません。この css 宣言を使用するだけで、すべてのブラウザーで完全に動作します。

#img{
   display:none;
}

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

より具体的にするには (すべてのホバーされたアンカーでトリガーされないようにするため)、アンカーにクラスを配置して記述します (例: .scary:hover ~ #img)。

onmouseover と onmouseout を使用しないでください。これらは、いくつかの理由から不適切なコーディング方法と見なされます。
また、タグを使用せず、代わりにcentercss-declarationを使用してください。text-align:center

score 0 · Accepted Answer

スクリプトでは、img.style.visibility を使用する代わりに、

img.style.display="none";

と

img.style.display="block";

img タグから visibility='hidden' 属性も必ず削除してください。そうしないと機能しません。

getElementById と ('img') の間にスペースがあります。それを削除して、もう一度お試しください。

2 に答える 2