:hover 的纯 JavaScript 替换答案

【问题标题】：Pure JavaScript replacement for :hover:hover 的纯 JavaScript 替换
【发布时间】：2015-07-26 01:16:58
【问题描述】：

本质上，我的目标是将 CSS :hover 替换为 JavaScript。原因是我需要在可变数量的 div 上执行一个循环，这些 div 将嵌套在应该对 :hover 做出反应的父 div 内。

但是，问题在于，我不知道如何仅针对悬停的 div 而不在特定 ID 中进行硬编码 - 一旦应用于我的项目（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

我的问题是 - 如何使用 javascript 而不是 CSS 使具有相同类或 id 的 div 在悬停时单独（或者，不是一次全部）做出反应？

感谢您的宝贵时间。

【问题讨论】：

有什么问题？
@zzzzBov 已编辑以澄清手头的问题 - 对此感到抱歉！
当您真的希望悬停影响.childbox 元素时，为什么要将悬停附加到#motherbox 元素？而是选择这些元素。
@zzzzBov 我的目标是让 .childbox 元素在 #motherbox 元素悬停时做出反应 - 我在我的问题中解释得很差。然而，我主要关心的是让#motherbox 元素在悬停时单独做出反应。

标签： javascript html css

【解决方案1】：

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

这是一个有效的demo。

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

【讨论】：

这甚至接近悬停
这非常有效 - 我对其进行了一些修改，我相信它会完全满足我的需求。我的问题是 - 这是如何工作的？我的理解是它循环遍历所有 div 并“准备好”它们 - 然后，当激活时，它们继续执行该功能。这是正确的，还是我误解了？
@knitevision：Sachin 的回答看起来确实适合我的问题。它有什么问题（除了创建比需要更多的功能）？
@KaiAragaki 是的，你是对的，它只是在给定类名的所有 div 上附加 ommouseleave 事件。

【解决方案2】：

所以用这个代替 getElementById： http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

并为您的 div 提供类，您希望在其中有该事件。

【讨论】：