Question

我试图突出显示某些div元素，当鼠标悬停在特定类上时。我希望整个div与类Test在鼠标悬停时突出显示，div中没有子节点（跨度）或者带有类Main的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>

感谢您的帮助！

Answer 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>

Answer 2

为什么不在:hover使用css？那会更快。

.Test {
  background-color: transparent;
}

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

Answer 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>

在javascript中使用某些类突出鼠标上的div元素

3 个答案: