Div Flickering onmouseover, onmouseout
Question
I have image and I want a div over it when mouse over but I don't want it onmouseout. I wrote the code and it works but it's flickering. here is the code:
<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 How can I solve it?
3 answers
solution1
2 2014-04-14 12:06:19
只需将onmouseover="picture(true)" onmouseout="picture(false)到您的div div中即可。
solution2
0 ACCPTED 2014-04-14 12:07:01
Because you need to use onmouseout event on 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;" onmouseout="picture(false)">1</div>
<img alt="ברק לוי" src="" style="background-color:red; height:163px; width:136px" onmouseover="picture(true)"/>
solution3
0 2014-04-14 12:12:38
<!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";
}
}
Try this. The flickering is due to the fact that when you set "Display: none" it isn't there, and the "mouseout" is triggered. While setting opacity to 0.0, it's still there as invisible, but the mouseout will not trigger.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.