1

我正在尝试通过 onmouseover 事件使 img 消失，然后我希望 img 通过 onmouseout 事件重新出现这是我到目前为止所拥有的：

<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在您以某种方式移动鼠标光标后，事件将立即触发，并且该元素将重新出现。这将导致光标移动时闪烁。这显然不是你想要的。您应该改变不透明度而不是完全隐藏元素。

您应该正确获取目标元素：请参阅Cross browser event listeners。

于 2013-05-19T20:11:01.233 回答