将类添加到子元素

Question

当用户的鼠标移过父元素时，我正在尝试向子元素添加一个类。我以为我可以使用＆＃39; firstChild＆＃39;但是我无法解决这个问题：

var hoverTrendingBoxContainer = document.querySelectorAll(".trending-box-container");
for (i = 0; i < hoverTrendingBoxContainer.length; i++) {
    hoverTrendingBoxContainer[i].addEventListener("mouseover", function () {
        this.firstChild.classList.add("trending-box-image-hover");
    });
}

这会返回＆＃39;无法读取属性＆＃39;添加＆＃39;未定义＆＃39;

尼尔

Answer 1

原因是firstChild是文本或其他内容（不是任何html标记），因此您收到错误。

请看下面的例子。在这里，如果我将鼠标移到第一个div上，那么这个班级就会出现问题。已成功添加到它的第一个孩子，但如果我在其他div（其他abc）上移动我会得到错误，因为该div的第一个孩子不是p标签，它的文本（abc） ）和玩具不能将classlist.add应用于文本。

＆＃13;

＆＃13;

var hoverTrendingBoxContainer = document.querySelectorAll(".a");
for (i = 0; i < hoverTrendingBoxContainer.length; i++) {
    hoverTrendingBoxContainer[i].addEventListener("mouseover", function () {
        this.firstChild.classList.add("ab");
    });
}

＆＃13;

.a{
color:red;
}
.ab{
color:blue;
}

＆＃13;

<div class='a'><p class="abc">bc</p></div>
<div class='a'>abc<p>bc</p></div>
<div class='a'>abc<p>bc</p></div>

＆＃13;

＆＃13;

＆＃13;