Highlighting div element on mouse over with certain class in javascript

Question

I'm trying to highlight certain div element when mouse hovers over it with spesific class. I want the whole div with class Test to be highlighted on mouse over and none of the children in the div (the span) or the div with class Main. Currently it highlights anything inside the div on mouse over as well.

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>

Thanks for any help!

gurvinder372 · Accepted Answer · 2017-11-20T09:45:48.203

This is due to event-capturing (a brief description of order here), event bound to the parent element is propagated to the DOM tree beneath.

Simply replace event.target with this.

Demo

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>

score 0 · Answer 2 · answered Nov 20 '17 at 09:48

0

Why don't you just use css with :hover? That would be much faster.

.Test {
  background-color: transparent;
}

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

answered Nov 20 '17 at 09:48

emil

6,074
4
30
38

Because I want the event to include other functionality that was left out of the question. Thou I did mark comment saying "there will be more stuff in here, triggered by the event" in the question if you did not notice. But if i did not have that, I would have used it in css. – Metzger Nov 20 '17 at 10:39
I did noticed that. It is not good practice to handle styling with javascript though. You can stab out styling part to css. – emil Nov 20 '17 at 15:08
I know, I'm thinking of putting in a class swap instead of styling. But for now until the program is done it will do. Thanks for the advice. – Metzger Nov 21 '17 at 07:34

score 0 · Answer 3 · answered Nov 20 '17 at 10:23

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>

Highlighting div element on mouse over with certain class in javascript

3 Answers3