用的onmouseover改变能见度/的onmouseout

我试图做一个IMG与onmouseover事件消失，那我想是IMG与onmouseout事件在这里再次出现就是我到目前为止有：用的onmouseover改变能见度/的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'; 
}

来源

2013-05-19 kyros

什么不工作？ – Jashwant

[This]（http://jsfiddle.net/jashwant/BxL4m/）完美作品 – Jashwant

不，不是。第二张图片闪烁，最后两张图片隐藏后未显示。 –

试采用不透明

node.style.opacity=0;

或

node.style.display='none';

来源

2013-05-19 20:05:18 anomaaly

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

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

来源

2013-05-19 20:11:01

但是当你隐藏一个元素时，它不会占用页面上的空间吗？这就是为什么我没有去显示：没有; – kyros

它需要。但是当你将鼠标移出这个地方时，你会移动到背景元素上。所以，鼠标悬停事件发生在背景元素上，鼠标事件发生在隐藏元素上，因为鼠标不再处于隐藏状态。 –

谢谢....我现在明白了 – kyros

用的onmouseover改变能见度/的onmouseout

回答

相关问题