1

onmouseover イベントで img を非表示にしようとしていますが、onmouseout イベントでその img を再表示したいと思います。

<body>
    <h1>Catch the Easter Bunny to get your egg!</h1>
    <img src="images/rabbit.png" id="rabbit1" onmouseover=""
         onmouseout="show(this);" alt="Catch the rabbit"/>
    <img src="images/rabbit.png" id="rabbit2" onmouseover="hide(this);"
         onmouseout="show(this);" alt="Catch the rabbit"/>
    <img src="images/rabbit.png" id="rabbit3" onmouseover="hide(this)" alt="Catch the rabbit"/>
    <img src="images/rabbit.png" id="rabbit4" onmouseover="hide(this)" alt="Catch the rabbit"/>
    <h2 id="noeggs">No Easter Eggs for You</h2>
    <h2 id="yousuck">Humans suck!!!</h2>
</body>

var count = 0;

function hide(node) {
    count += 1;
    node.style.visibility = 'hidden';
}

function show(node) {
    node.style.visibility = 'visible';
}
4

2 に答える 2

1

不透明度を使ってみる

node.style.opacity=0;

また

node.style.display='none';
于 2013-05-19T20:05:18.670 に答える
0

これがどのように機能すると思いますか？要素を非表示にするonmouseoutと、何らかの方法でマウス カーソルを移動した直後にイベントが発生し、要素が再表示されます。これにより、カーソルの移動中に点滅が発生します。これは明らかにあなたが望むものではありません。要素を完全に隠すのではなく、不透明度を変更する必要があります。

そして、ターゲット要素を適切に取得する必要があります。クロスブラウザーイベントリスナーを参照してください。

于 2013-05-19T20:11:01.233 に答える