原生js触发:hover伪类 (解决办法-添加class)

button触发div:hover效果, mouse事件无法模拟!

原生js触发:hover伪类 (解决办法-添加class)_第1张图片

<style>
    div {
      width: 200px;
      height: 200px;
      background-color: orange;
    }
    div:hover {
      background-color: skyblue;
    }
  </style>
 <body>
  <div></div>
  <hr>
  <button>trigger</button>
  <script>
  	/* 没用 */
    let oBtn = document.querySelector("button")
    let oDiv = document.querySelector("div")
    let ev = new MouseEvent("mouseover")
    oBtn.onclick = function () {
      oDiv.dispatchEvent(ev)
    }
  </script>
</body>

解决办法 新添类

  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: orange;
    }
    .divHover {
      background-color: skyblue;
    }
  </style>
  <body>
  <div></div>
  <hr>
  <button>trigger</button>
  <script>
  	// 复原的就不写了,类似
    let oBtn = document.querySelector("button")
    let oDiv = document.querySelector("div")
    oBtn.onclick = function () {
      // oDiv.className += "divHover"
      oDiv.classList.add("divHover")
    }
  </script>
</body>
  • 注意
    className += 'xxx' 相当于是字符串拼接,如果原先有class记得加空格,另外还会重复添加,比较蠢;
    classList.add/remove 就不用担心类似问题
    原生js触发:hover伪类 (解决办法-添加class)_第2张图片

你可能感兴趣的:(javascript,javascript,前端,css)