div 闪烁 onmouseover, onmouseout答案

【问题标题】：Div Flickering onmouseover, onmouseoutdiv 闪烁 onmouseover, onmouseout
【发布时间】：2014-04-14 12:00:43
【问题描述】：

我有图像，当鼠标悬停时我想要一个 div，但我不希望它在鼠标移出。我写了代码，它可以工作，但它在闪烁。这是代码：

<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 我该如何解决？

【问题讨论】：

标签： javascript html onmouseover onmouseout

【解决方案1】：

只需将onmouseover="picture(true)" onmouseout="picture(false) 添加到您的 div div。

【讨论】：

【解决方案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)"/>

【讨论】：

【解决方案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 时，它仍然不可见，但不会触发鼠标移出。

【讨论】：