Question

我的目标本质上是将CSS：hover替换为JavaScript。原因是我需要在可变数量的div上执行循环，这些div将嵌套在应该响应的父div中：hover。

然而，问题在于我不知道如何在没有特定ID的硬编码的情况下仅仅针对正在徘徊的div - 这是我在应用于我的项目时无法做到的事情，这是一个tumblr主题。

HTML

<div id="motherbox">
    <div class="middlebox">
        <div class="childbox">One</div>
        <div class="childbox">Two</div>
        <div class="childbox">Three</div>
    </div>
</div>
<div id="motherbox">
    <div class="middlebox">
        <div class="childbox">One</div>
        <div class="childbox">Two</div>
        <div class="childbox">Three</div>
        <div class="childbox">Four</div>
        <div class="childbox">Five</div>
    </div>
</div>

CSS

#motherbox {
    width:30%;
    height:100px;
    margin:100px auto;
    background-color:gray;
}

的JavaScript

document.getElementById("motherbox").onmouseenter = function(){
    this.style.backgroundColor = 'blue';
};

document.getElementById("motherbox").onmouseleave = function(){
    this.style.backgroundColor = "gray";
};

JSFiddle

我的问题是 - 如何使用相同的类或ID来使用javascript而不是CSS来单独（或者更确切地说，不是一次性）做出反应？

感谢您的时间。

Answer 1

基本上，您可以使用getElementsByClassName选择具有特定类的元素。

这是一个有效的demo。

var elements = document.getElementsByClassName('childbox');
for(var i=0; i<elements.length; i++) { 
  elements[i].onmouseleave = function(){
    this.style.backgroundColor = "blue";
};
}

Answer 2

因此使用而不是getElementById： http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

并为您的div提供classess，您希望在那里举办该活动。

纯JavaScript替代：悬停

2 个答案: