Question

我试图通过一个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';
}

Answer 1

尝试使用不透明度

node.style.opacity=0;

或

node.style.display='none';

Answer 2

您认为这是如何工作的？当您隐藏元素时，onmouseout事件将在您以某种方式移动鼠标光标后立即触发，并且该元素将重新出现。这将导致光标移动时闪烁。这显然不是你想要的。你应该改变不透明度，而不是完全隐藏元素。

你应该正确获得目标元素：见Cross browser event listeners。

使用onmouseover / onmouseout更改可见性

2 个答案: