用的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

回答

相關問題