Question

我想创建一个具有一些trasition效果的下拉菜单（具有不透明度）。这是我的代码：

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的过渡效果，仅适用于第二个＆＃34; ul＆＃34;。

但过渡不起作用。我检查了js，没关系。但为什么效果不起作用呢？提前致谢并对我的错误表示抱歉（这不是我原来的语言）。

Answer 1

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

你会发现，既然你的子菜单已呈现但是透明，它可能最终会吃掉用于其下方内容的鼠标点击 - 有多种方法可以解决这个问题（包括pointer-events: none CSS属性）

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

Answer 2

这是我对它的看法...... https://jsfiddle.net/61haxkh2/6/

我使用直接css来获得你想要的效果。我所做的只是将这两位添加到你的CSS中，我给“c”菜单链接一个id为“c”。

#child{
transition: all .3s;
}

#c:hover > #child{
    opacity:1;
}

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

2 个答案: