Question

DIV中具有“ change”类的每个段落，当它们放在鼠标上时，其字体颜色应为红色，而当鼠标关闭时，其字体颜色应变回黑色。这是我的继承人：

var para = document.getElementsByTagName('p');

var c = document.getElementsByClassName('change');

for(let i = 0; i < para.length; i++) {

    para[i].onmouseover = function () {
      para[i].style.color = "red";
    }

    para[i].onmouseout = function () {
      para[i].style.color = "black";
    }
}

我尝试了很多事情，觉得自己缺少一些简单的东西。 html div类名称为“ change”。

Answer 1

我认为这就是您要寻找的。

// Executed when page is loaded
window.addEventListener("load", siteLoaded, false);

function siteLoaded() 
{
    // Selects all p-elements
   let pTags = document.querySelectorAll("p");

   for(let i = 0; i<pTags.length; i++) {

    // Adds eventlistener to each <p> to handle mouseover
    pTags[i].addEventListener('mouseover', function(e) {
        e.target.style.color = 'red';
    }, false);

    // Adds eventlistener to each <p> to handle mouseout
    pTags[i].addEventListener('mouseout', function(e) {
        e.target.style.color = 'black';
    }, false);
   }
 }

如果要按类名和p元素定位，请使用：

 let pTags = document.querySelectorAll("p.change");

Answer 2

为什么不只在css中使用悬停？

.change:hover {
  color: red;
}

<p class="change">Will change red on hover</p>
<p>Wont change red on hover</p>

Answer 3

尝试一下，我已将其更新为您的需求。

let change = document.getElementsByClassName('change');
for(item of change){ 
  let para =item.querySelectorAll("p");
  for(let i = 0; i < para.length; i++) {

    para[i].onmouseover = function () {
      para[i].style.color = "red";
    }

    para[i].onmouseout = function () {
      para[i].style.color = "black";
    }
}

}

有关更多详细信息，请查看here

Answer 4

您可以在javascript中使用它简单地进行检查

element.classList.contains(class);

如何检查元素是否包含JavaScript中的类

4 个答案: