CODEWITHSUNDEEP
javascriptjquerycss
Ankur Shah
Ankur Shah

Reputation: 831

mouseover and mouseout events in javascript not working in proper manner

I am trying to make a div which pops up on mouseover over its parent div and disappears on mouseout. But when I entered the mouse in that div area, its not showing a clear increase in the height rather its height flickers up and down continuously on even a slight movement of the mouse within the area(i.e., mouse was not taken out of the area while sliding).

See the working code: http://jsfiddle.net/ankur3291/xN5bS/

Firstly, I want to know how the mouseover and mouseout event works (their true meanings) and secondly, what is the remedy for it? I am basically finding the solution in pure javascript but jQuery code is also appreciable. See my full code below:

<!DOCTYPE html>
<html>
<head>
<title>js height check</title>
<style type="text/css">
#box{display:block;height:200px;width:200px;border:1px solid #000;position:relative;}
#inner{display:none;height:0;opacity:0.6;background-color:#000;width:200px;position:absolute;bottom:0;}
</style>
<script type="text/javascript">
function heightUp()
{
var h=20;
var obj=document.getElementById("inner");
obj.style.display="block";
function frame()
{
    h=h+5;
    obj.style.height=h+"px";
    if(h>=150)
        clearInterval(timer1);
}
var timer1=setInterval(frame,10);
}
function heightDown()
{
var obj=document.getElementById("inner");
var h=parseInt(obj.style.height);
document.getElementById("matter").innerHTML=h;
function frame()
{
    h=h-5;
    obj.style.height=h+"px";
    if(h>=30)
    {
        obj.style.display="none";
        clearInterval(timer2);
    }
}
var timer2=setInterval(frame,10);
//obj.style.height-=100+'px';
}
</script>
</head>
<body>
<div id="box" onmouseover="heightUp()" onmouseout="heightDown()">
<div id="inner">
</div>
</div>
<p id="matter">h</p>
</body>
</html>

Upvotes: 0

Views: 3399

Answers (2)

Luan Citta
Luan Citta

Reputation: 78

First of all, the events do respectively

  • MouseOver: A mouse passes over this element (this keeps calling while you move the mouse over this element thats the problem)
  • MouseOut: A mouse leaves the area of the element

but the best and easiest way to archieve the effect you want is doing it by jquery as follows

$(document).ready(function(){
  $("#box").hover(function(){
    //Mouse Enter

    $("#inner").animate({height: "200px"}, 500);
  },function(){
    //Mouse Leaves

    $("#inner").clearQueue();
    $("#inner").animate({height: "0px"}, 500);
  });

});

working link http://jsfiddle.net/xN5bS/1/

Upvotes: 1

tkone
tkone

Reputation: 22758

The problem here is that when inner rises to the point of your cursor, since it's "on top" of the box element, you are no longer technically "over" the box element. Ergo, the mouseout event fires.

If you add pointer-events: none to your CSS declaration for inner, this will work since you're telling that element to ignore pointer events. This way the obscured element (box) will receive the events.

Here's a a fiddle with it fixed.

Also you shouldn't use the onmouseover or onmouseout HTML attributes when assigning event handlers, rather do it via the addEventListener interface. (Which is attachEvent in IE8, btw)

Upvotes: 2

Related Questions