Div閃爍onmouseover，onmouseout

Question

我有圖像，並且當鼠標懸停在上面時我想要一個div，但是我不希望它在onmouseout上顯示。 我編寫了代碼，它可以工作，但是閃爍。 這是代碼：

<div id="div" style="opacity:0.6; background-color:#2c3e50; width:136px; height:163px; z-index:199; position:absolute; vertical-align:top; font-size:120px; text-align:center; color:White; display:none;">1</div>
<img alt="ברק לוי" src="" style="background-color:red; height:163px; width:136px" onmouseover="picture(true)" onmouseout="picture(false)"/>

function picture(bool) {
    if (bool) {
        document.getElementById("div").style.display = "block";
    }
    else if (bool==false) {
        document.getElementById("div").style.display = "none";
    }
}

jsBin我該如何解決？

Answer 1

只需將onmouseover="picture(true)" onmouseout="picture(false)到您的div div中即可。

Answer 2

因為您需要在div上使用onmouseout事件

<div id="div" style="opacity:0.6; background-color:#2c3e50; width:136px; height:163px; z-index:199; position:absolute; vertical-align:top; font-size:120px; text-align:center; color:White; display:none;" onmouseout="picture(false)">1</div>

<img alt="ברק לוי" src="" style="background-color:red; height:163px; width:136px" onmouseover="picture(true)"/>

Answer 3

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="div" style="opacity:0.6; background-color:#2c3e50; width:136px; height:163px; z-index:199; position:absolute; vertical-align:top; font-size:120px; text-align:center; color:White; display:block;" onmouseover="picture(true)" onmouseout="picture(false)">1
<img alt="" src="http://i.imgur.com/vbKNWRZ.gif" id="image"/></div>
</body>
</html>


function picture(bool) {
    if (bool) {
        document.getElementById("div").style.opacity = "0.6";
    }
    else {
        document.getElementById("div").style.opacity = "0.0";
    }
}

嘗試這個。 閃爍是由於以下事實：當您設置“顯示：無”時，它不存在，並且觸發了“鼠標停頓”。 將不透明度設置為0.0時，它仍然不可見，但不會觸發鼠標移開。

Div閃爍onmouseover，onmouseout

問題描述

3 個解決方案

解決方案1
2 2014-04-14 12:06:19

解決方案2
0 已采納 2014-04-14 12:07:01

解決方案3
0 2014-04-14 12:12:38

Div閃爍onmouseover，onmouseout

問題描述

3 個解決方案

解決方案1 2 2014-04-14 12:06:19

解決方案2 0 已采納 2014-04-14 12:07:01

解決方案3 0 2014-04-14 12:12:38

解決方案1
2 2014-04-14 12:06:19

解決方案2
0 已采納 2014-04-14 12:07:01

解決方案3
0 2014-04-14 12:12:38