CODEWITHSUNDEEP
javascripthtml
Muhammad Afaq Riaz
Muhammad Afaq Riaz

Reputation: 400

Add event on inner class by mouseovering on outer class in html using javascript

I have class post and another class postinr defined in post class. I want to attach event to class postinr while mouseovering on class post. But I am unable to do that. What is the solution. Here is simple structure of html and javascript...`

var post=document.getElementsByClassName("post");
var postInner=document.getElementsByClassName("postinr");
var i;
for(i=0; i<postInner.length; i++)
{
post[i].addEventListener("mouseover",animate,false);
post[i].addEventListener("mouseout",animate2,false);
}
function animate() {
	this.style.setProperty("-webkit-transition", "margin-top 2s");
	this.style.setProperty("margin-top", "70px");
}
function animate2() {
	this.style.setProperty("-webkit-transition", "margin-top 2s");
	this.style.setProperty("margin-top", "123px");
}
<div class="post">
  <img src="" alt="">
  <div class="postinr">
	<h3></h3>
  </div>
</div>

Upvotes: 0

Views: 116

Answers (3)

Ziv Weissman
Ziv Weissman

Reputation: 4526

If you want that hovering the parent div will affect the child div you can use same approach only use the "animate" on children.

I've put a sample if you have only 1 child, but you can do it in a loop for all children of class "postinr"

var post=document.getElementsByClassName("post");
var postInner=document.getElementsByClassName("postinr");
var i;
for(i=0; i<postInner.length; i++)
{
   
post[i].addEventListener("mouseover",animate,false);
post[i].addEventListener("mouseout",animate2,false);
}
function animate() {
    var child = this.getElementsByClassName("postinr")[0];
	child.style.setProperty("-webkit-transition", "margin-top 2s");
	child.style.setProperty("margin-top", "70px");
}
function animate2() {
    var child = this.getElementsByClassName("postinr")[0];
	child.style.setProperty("-webkit-transition", "margin-top 2s");
	child.style.setProperty("margin-top", "123px");
}
.post {
border: 1px solid red;
height: 100px;
width: 100px;}

.postinr {
border: 1px solid blue;
}
<div class="post">
  <img src="" alt="">
  <div class="postinr">
	<h3>123</h3>
  </div>
</div>

Upvotes: 1

divy3993
divy3993

Reputation: 5810

If i understood you well, you need something like this.

What here is done when .post element gets hovered at that instance .postinr gets changed or updated as you want.

h3 { margin:0; }
.post {
  background: yellow;
  padding: 15px;
}
.postinr {
  background: #cecece;
  padding: 10px;
  margin-top:123px;
  transition: margin-top 0.2s ease;
}

.post:hover .postinr {
  margin-top:70px;
}
<div class="post">
  <img src="" alt="">
  <div class="postinr">
	<h3>Hello World!</h3>
  </div>
</div>

The solution here is just using HTML & CSS, i guess you do not need JS for this.

Hope this helps you :-), Thank You!

Upvotes: 1

mseifert
mseifert

Reputation: 5670

Within the animate functions, reference postinr. I added a border so you can see what is happening to the divs.

var post=document.getElementsByClassName("post");
var postInner=document.getElementsByClassName("postinr");
var i;
for(i=0; i<postInner.length; i++)
{
post[i].addEventListener("mouseover",animate,false);
post[i].addEventListener("mouseout",animate2,false);
}
function animate() {
    var postInner=document.getElementsByClassName("postinr")[0];
	postInner.style.setProperty("-webkit-transition", "margin-top 2s");
	postInner.style.setProperty("margin-top", "70px");
}
function animate2() {
    var postInner=document.getElementsByClassName("postinr")[0];
	postInner.style.setProperty("-webkit-transition", "margin-top 2s");
	postInner.style.setProperty("margin-top", "123px");
}
div{
border:1px solid black;
}
<div class="post">
  <img src="" alt="">
  <div class="postinr">
	<h3></h3>
  </div>
</div>

Upvotes: 0

Related Questions