如何正确运行鼠标悬停[关闭]

Question

console.log("Initializing...");
document.querySelector(".about-arrow").addEventListener("click",()=>{
    document.querySelector(".about").style.zIndex='1'
});

这是我在与 html 文件链接的 js 文件中编写的代码。这是 div 'about' 的 CSS

    .about{
        position: relative;
        height: 10px;
        width: 264px;
        right: -31px;
        z-index: -5;
    }

about-arrow

是来自谷歌字体的向下箭头符号

我希望通过更改 z-index 来显示

about

中的文本，但它不起作用。

Answer 1

给你。

document.querySelector('.about-arrow').addEventListener('click', () => {
  document.querySelector('.about').style.display = "block";
})

.about-arrow {
  position: relative;
  background-color: blue;
  padding: 20px;
}

.about {
  background-color: red;
  padding: 20px;
  
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}

<div class="about-arrow">
  click me ->
  <div class="about">test</div>
</div>

z-index 不是最好的，因为即使它不可见，浏览器仍然会呈现你的相关内容。

根据您在问题中提供的内容（缺少 HTML），问题要么出在您的 html 上，要么您在创建 html 之前运行您的 javascript（在存在带有 .about-arrow 类的元素之前）