时间戳

首页 > 解决方案 > 为什么没有选择 DOM 元素

javascript - 为什么没有选择 DOM 元素

问题描述

我有一个函数在悬停时显示一个 html 元素，但它似乎没有按预期工作。

我在js文件中的代码如下：

const htmlIc = document.querySelector('.fa-html5');
const htmlInfo = document.querySelector('.info-section');

htmlIc.addEventListener("mouseover", toggleHtml);


function toggleHtml() {
       htmlInfo.classList.add("show");
}

这是事件侦听器正在侦听的元素（图标）：

<div class="icons">
     <a href="#!">
         <i class="fab fa-html5 fa-2x"></i>
     </a>
</div>

这是我希望将 show 类应用于的元素：

<div class="info-section">
     <h1>Lorem ipsum</h1>
</div>

我在这个项目中使用了SASS，并且通过手动将show类添加到元素中进行了验证，并且从那部分没有问题

标签： javascripthtmlcsssass

解决方案

style display您可以在通过选项切换它们的地方做一些事情。您可以做的一件事是，如果您与使用show类结婚，那么您需要在显示显示和隐藏之间创建类似的切换。

const htmlIc = document.querySelector(".fa-html5");
const htmlInfo = document.querySelector(".info-section");

htmlIc.addEventListener("mouseover", toggleHtml);

function toggleHtml() {
  let infoSection = document.querySelector(".info-section");
  if (infoSection.style.display === "none") {
    infoSection.style.display = "block";
  } else {
    infoSection.style.display = "none";
  }
}
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="icons">
      <a href="#!">
        <i class="fab fa-html5 fa-2x">hh</i>
      </a>
      <div class="info-section" style="display: none;">
        <h1>Lorem ipsum</h1>
      </div>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

推荐阅读