Search code examples
javascripthtmlonmouseoveronmouseout

Div Flickering onmouseover, onmouseout

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?

Solution

  • 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)"/>