javascript - 如何使用 vanilla Javascript 添加 classList？

Question

如何在两个 div 具有相同类名的情况下将悬停类添加到 div。

这是我的 HTML。

<div class="selectable nature">
<span>Hello</span>
</div>

<div class="selectable nature">
<span>Hello</span>
</div>

我用javascript试过了，但这没有用

document.querySelector('.selectable.nature').addEventListener('mouseover', function(){
    var el = document.querySelector('.selectable.nature')
    el.classList.add("hover");
    el.classList.remove("nature");
});

document.querySelector('.selectable.hover').addEventListener('mouseout', function(){
    var el = document.querySelector('.selectable.hover')
    el.classList.remove("hover");
    el.classList.add("nature");
})

标签： javascripthtmlcss

Answer 1

这边走

document.querySelectorAll('.selectable.nature').forEach (el => {
  el.addEventListener('mouseover', function(){
    el.classList.add("hover");
    el.classList.remove("nature");
  })
  el.addEventListener('mouseout', function(){
    el.classList.remove("hover");
    el.classList.add("nature");
  })
})

.selectable {
  border: 1px solid darkblue;
  padding: .6em;
  margin: 1em;
  }
.nature {
  background-color: yellow;
  }
.hover {
  background-color: lightblue;
  }

<div class="selectable nature">
  <span>Hello 1</span>
</div>

<div class="selectable nature">
  <span>Hello 2</span>
</div>