用javascript中的某些类突出显示鼠标悬停的div元素答案

【问题标题】：Highlighting div element on mouse over with certain class in javascript用javascript中的某些类突出显示鼠标悬停的div元素
【发布时间】：2017-11-20 09:32:15
【问题描述】：

当鼠标悬停在特定类上时，我试图突出显示某些 div 元素。我希望在鼠标悬停时突出显示带有 Test 类的整个 div，并且在 div （跨度）或具有 Main 类的 div 中没有子级。目前，它也会在鼠标悬停时突出显示 div 内的任何内容。

var linkit = document.getElementsByClassName("Test");
for (var i = 0; i < linkit.length; i++) {
    linkit[i].addEventListener("mouseover", function (event) {
        event.target.style.backgroundColor = "#ffcc00";

        //some things I tried
        //event.target.parentNode.style.backgroundColor = "#ffcc00";
        //event.target.childNodes[0].style.backgroundColor = "#ffcc00";

        //there will be more stuff in here, triggered by the event
    });
}

var linkit = document.getElementsByClassName("Test");
for (var i = 0; i < linkit.length; i++) {
    linkit[i].addEventListener("mouseout", function (event) {
        event.target.style.backgroundColor = "transparent";

        //some things I tried
        //event.target.parentNode.style.backgroundColor = "transparent";
        //event.target.childNodes[0].style.backgroundColor = "transparent";

        //there will be more stuff in here, triggered by the event
    });
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>


    <div style="position: absolute; left: 540px; top: 0px;">
        <div class="Main">

            <div class="Test Test0">
                <span>Text0</span>
                <span>T</span>
                <span>A</span>
            </div>
            <div class="Test Test1">
                <span>Text1</span>
                <span>T</span>
                <span>A</span>
            </div>
            <div class="Test Test2">
                <span>Text2</span>
                <span>T</span>
                <span>A</span>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>

感谢您的帮助！

【问题讨论】：

标签： javascript html

【解决方案1】：

这是由于事件捕获（订单here的简要说明），绑定到父元素的事件被传播到下面的DOM树。

只需将event.target 替换为this。

演示

var linkit = document.getElementsByClassName("Test");
for (var i = 0; i < linkit.length; i++) {
    linkit[i].addEventListener("mouseover", function (event) {
        this.style.backgroundColor = "#ffcc00";
    });
}

var linkit = document.getElementsByClassName("Test");
for (var i = 0; i < linkit.length; i++) {
    linkit[i].addEventListener("mouseout", function (event) {
        this.style.backgroundColor = "transparent";
    });
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>


    <div style="position: absolute; left: 540px; top: 0px;">
        <div class="Main">

            <div class="Test Test0">
                <span>Text0</span>
                <span>T</span>
                <span>A</span>
            </div>
            <div class="Test Test1">
                <span>Text1</span>
                <span>T</span>
                <span>A</span>
            </div>
            <div class="Test Test2">
                <span>Text2</span>
                <span>T</span>
                <span>A</span>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>

【讨论】：

【解决方案2】：

你为什么不直接使用 css 和 :hover？这样会快很多。

.Test {
  background-color: transparent;
}

.Test:hover {
  background-color: #ffcc00;
}

【讨论】：

因为我希望该事件包含其他无法解决的功能。如果您没有注意到，我确实在问题中标记了评论说“这里会有更多的东西，由事件触发”。但如果我没有那个，我会在 css 中使用它。
我确实注意到了这一点。不过，使用 javascript 处理样式并不是一个好习惯。您可以将样式部分插入到 css 中。
我知道，我正在考虑使用类交换而不是样式。但就目前而言，直到程序完成它才会这样做。感谢您的建议。

【解决方案3】：

var linkit =  document.querySelectorAll(".Test");
function isInside(node, target) {
    for (; node != null; node = node.parentNode)
      if (node == target) return true;
  }
   
      linkit.forEach(function(element) {
        element.addEventListener("mouseover", function(event) {
    if (!isInside(event.relatedTarget, element))
      element.style.backgroundColor = "#ffcc00";
  });
  element.addEventListener("mouseout", function(event) {
    if (!isInside(event.relatedTarget,element))
      element.style.backgroundColor = "rgba(255, 255, 255, .4)";
      })
})

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>


    <div style="position: absolute; left: 540px; top: 0px;">
        <div class="Main">

            <div class="Test Test0">
                <span>Text0</span>
                <span>T</span>
                <span>A</span>
            </div>
            <div class="Test Test1">
                <span>Text1</span>
                <span>T</span>
                <span>A</span>
            </div>
            <div class="Test Test2">
                <span>Text2</span>
                <span>T</span>
                <span>A</span>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>

【讨论】：