在html中使用javascript在外部類上使用mouseovering添加內部類的事件

Question

我有在post類中定義的class post和另一個類postinr。我想在班級發佈上鼠標懸停時將活動附加到班級postinr。但我無法做到這一點。解決辦法是什麼。這裏是HTML和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() { 
 
\t this.style.setProperty("-webkit-transition", "margin-top 2s"); 
 
\t this.style.setProperty("margin-top", "70px"); 
 
} 
 
function animate2() { 
 
\t this.style.setProperty("-webkit-transition", "margin-top 2s"); 
 
\t this.style.setProperty("margin-top", "123px"); 
 
}

<div class="post"> 
 
    <img src="" alt=""> 
 
    <div class="postinr"> 
 
\t <h3></h3> 
 
    </div> 
 
</div>

Answer 1

如果您希望徘徊在家長的div會影響DIV可以用同樣的方法只能用在孩子的「動畫」孩子。

我已經把一個樣本，如果你只有1個孩子，但你可以做到這一點在類的所有子循環「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]; 
 
\t child.style.setProperty("-webkit-transition", "margin-top 2s"); 
 
\t child.style.setProperty("margin-top", "70px"); 
 
} 
 
function animate2() { 
 
    var child = this.getElementsByClassName("postinr")[0]; 
 
\t child.style.setProperty("-webkit-transition", "margin-top 2s"); 
 
\t 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"> 
 
\t <h3>123</h3> 
 
    </div> 
 
</div>

Answer 2

內animate功能，參考postinr。我添加了一個邊框，以便您可以看到div發生了什麼。

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]; 
 
\t postInner.style.setProperty("-webkit-transition", "margin-top 2s"); 
 
\t postInner.style.setProperty("margin-top", "70px"); 
 
} 
 
function animate2() { 
 
    var postInner=document.getElementsByClassName("postinr")[0]; 
 
\t postInner.style.setProperty("-webkit-transition", "margin-top 2s"); 
 
\t postInner.style.setProperty("margin-top", "123px"); 
 
}

div{ 
 
border:1px solid black; 
 
}

<div class="post"> 
 
    <img src="" alt=""> 
 
    <div class="postinr"> 
 
\t <h3></h3> 
 
    </div> 
 
</div>

Answer 3

如果我理解你好吧，你需要這樣的東西。

當.post元素得到hovered在那個實例.postinr得到更改或更新，如果你想要做什麼。

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"> 
 
\t <h3>Hello World!</h3> 
 
    </div> 
 
</div>

這裏的解決方案是在運用HTML CSS &，我猜你不需要JS這一點。

希望這可以幫助你:-)，謝謝！