CODEWITHSUNDEEP
javascripthtmlcss
Dhruv Chadha
Dhruv Chadha

Reputation: 1177

onmouseover event misbehaving

I was trying to make somewhat of a curtain type effect and applied onmouseover to a parent div id. I am not able to understand why is the effect taking place when I mouse over on the child div, other than the parent div.

var left = document.getElementById("left");
var right = document.getElementById("right");

function curtain() {
  left.style.transform = "rotate(30deg)";
  right.style.transform = "rotate(-30deg)";
}

function back() {
  left.style.transform = "rotate(0deg)";
  right.style.transform = "rotate(0deg)";
}

CSS:

#animate {
  width: 400px;
  margin: auto;
  position: relative;
}
img {
  width: 100%;
}
#left {
  position: absolute;
  top: 0;
  right: 50%;
  padding: 0;
  margin: 0;
  width: 50%;
  transform-origin: 0 0;
}
#right {
  position: absolute;
  top: 0;
  right: 0%;
  padding: 0;
  margin: 0;
  width: 50%;
  transform-origin: 100% 0;
}

HTML:

<div id="animate" onmouseover="curtain()" onmouseout="back()">
  <div id="left">
    <img src="http://www.uwphotographyguide.com/images/Articles/image-overlay-3107.jpg">
  </div>
  <div id="right">
    <img src="http://s3.freefoto.com/images/15/78/15_78_19_web.jpg">
  </div>
</div>

Upvotes: 1

Views: 75

Answers (3)

Poonam
Poonam

Reputation: 549

As per my understanding, I think you want that if you mouse over on child div no effects will be on child div, It should happens only when you mouse over on parent div.

This is happening because child div is inside the scope of parent div.

So you have to manage these div. Adjust the height of parent div and it will works fine.

Upvotes: 1

Krupesh Kotecha
Krupesh Kotecha

Reputation: 2412

This was happen because your outer div height was small compare to image size. so when you move mouse outside outer div back event is called. just give some minimum height to outer div. here is working code

var left = document.getElementById("left");
var right = document.getElementById("right");

function curtain() {
  left.style.transform = "rotate(30deg)";
  right.style.transform = "rotate(-30deg)";
}

function back() {
  left.style.transform = "rotate(0deg)";
  right.style.transform = "rotate(0deg)";
}
#animate {
  width: 250px;
  margin: auto;
  position: relative;
  height: 225px;
  border: 1px solid;
}
img {
  width: 100%;
}
#left {
  position: absolute;
  top: 0;
  right: 50%;
  padding: 0;
  margin: 0;
  width: 50%;
  transform-origin: 0 0;
}
#right {
  position: absolute;
  top: 0;
  right: 0%;
  padding: 0;
  margin: 0;
  width: 50%;
  transform-origin: 100% 0;
}
<div id="animate" onmouseover="curtain()" onmouseout="back()">
  <div id="left">
    <img src="http://www.uwphotographyguide.com/images/Articles/image-overlay-3107.jpg">
  </div>
  <div id="right">
    <img src="http://s3.freefoto.com/images/15/78/15_78_19_web.jpg">
  </div>
</div>

Upvotes: 1

Daniel
Daniel

Reputation: 609

I think the answer is that you made the position of the childs absolute. With that they are not longer "part" of the parent div. In your case the outer div has no height because the children are put absolute on the page.

The mouseover property delegates down. So the parent listens and all it's children. Read up on this one for more information how a event listener works https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Upvotes: 1

Related Questions