javascript - 如何使用 js 作为悬停检测器创建过渡效果？

Question

我想制作一个带有一些过渡效果(不透明)的下拉菜单。这是我的代码:

function show(id) {
  var x = document.getElementById(id);
  x.style.display = "block";
  x.style.opacity = 1;
}

#parent1 {
  background-color: grey;
  width: 40%;
  color: white
}
#par {
  padding: 0;
  margin: 0;
  text-align: center
}
.as {
  position: relative;
  padding: 10px;
}
hr {
  padding: 0;
  margin: 0;
}
ul>li>ul {
  /* this is "child" */
  color: rgb(15, 22, 98);
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  padding: 30px;
  opacity: 0;
  transition: opacity 2s ease;
  background-color: rgb(90, 90, 90);
  white-space: nowrap;
  box-shadow: inset 2px 0 7px -1px black;
}

<div id="parent1">
  <ul id="par" type="none">
    <li class="as">a</li>
    <hr/>
    <li class="as">b</li>
    <hr/>
    <li class="as" onmouseover="show('child')">c
      <ul id="child" type="none">
        <li class="ass1">1</li>
        <li class="ass1">2</li>
        <li class="ass1">3</li>
        <li class="ass1">4</li>
      </ul>
    </li>
    <hr/>
    <li class="as">d</li>
  </ul>
</div>

这是 JsFiddle . 我想创建从不透明度 0 到 1 的过渡效果，并将其仅应用于第二个“ul”。

但是转换不起作用。我检查了js，没问题。但是为什么没有效果呢？在此先感谢并为我的错误道歉(这不是我原来的语言)。

Answer 1

这是因为您在 CSS 中设置了 display:none；因此，转换逻辑似乎没有激活。摆脱这个属性解决了这个问题:https://jsfiddle.net/82kdkt63/

您会发现，现在您的子菜单已呈现但透明，它最终可能会吃掉鼠标点击，而这些点击是针对其下方的内容 - 有多种方法可以解决这个问题(包括 pointer-events: none CSS 属性)

总的来说，您会发现直接使用 javascript 设置 css 属性不如添加和删除 CSS 类好 - 我推荐这种方法。