Question

我遇到了鼠标移出问题的问题我使用过类似问题的一些例子，但没有运气，因为情况略有不同：

当页面加载时，我有一个菜单栏，其中一个选项触发隐藏的div：

.top-links div.musictest {
    display: none;
    position:absolute;
    float:left;
    }

悬停时的特定选项会触发div.musictest显示为块。

.top-links li.music:hover + div.musictest {
        display:block;
    }

所以当这个下拉div.musictest显示为一个块来保持它显示，因为它包含了要点击的选项本身我有CSS说：

.top-links div.musictest:hover {
     display:block;
    }

所以这是我的问题，从我读过的任何地方，如果我想要.top-links div.musictest在我停止徘徊时淡出它需要一个过渡延迟然而当我把一个没有任何事情发生，因为我相信显示：无正在阻止它逐渐消失。但没有显示：没有它总是显示隐藏的div.musictest。

目前上面的代码工作正常，如果我希望隐藏的div立即消失，但我希望它在消失之前有一个过渡时间。

有什么方法可以解决这个问题，还是我把它放在错误的地方？

谢谢！

Answer 1

您可以设置opacity: 0而不是display: none

（编辑：我刚刚再次阅读您的标题，您可以查看this link仅淡出）

以下是两个例子：

.top-links li.music:hover {
  background-color: #EEE;
}
.top-links li.music:hover + div.musictest {
  display: block;
  opacity: 1;
}
.top-links div.musictest {
  opacity: 0;
  transition: 1s;
  -moz-transition: 1s;
  -webkit-transition: 1s;
  -o-transition: 1s;
  position: absolute;
  float: left;
  top: 44px;
  width: 800px;
  left: 22px;
}
.top-links div.musictest:hover {
  display: block;
}

<div class="top-links">
  <toplinks>
    <ul id="menu">
      <li>Home</li>
      <li class="music">Music</li>
      <div class="musictest">
        Show when hover li class="music"
      </div>
    </ul>
  </toplinks>
</div>

Answer 2

我将div的不透明度设置为零，因此它不会被显示，但它仍然处于显示模式块中，当你的鼠标不在元素时，它开始褪色出你想要的那样。

将此添加到您的css：

.top-links li.music:hover + div.musictest {

       opacity:1;
       transition: opacity 0.1s;
       -moz-transition: opacity 0.1s;
       -webkit-transition: opacity 0.1s;
       -o-transition: opacity 0.1s;
    }

  .top-links li.music + div.musictest {
       opacity:0;
       display:block;
       transition: opacity 2s;
       -moz-transition: opacity 2s;
       -webkit-transition: opacity 2s;
       -o-transition: opacity 2s;
    }

这是一个有效的example

CSS Hover Out / Mouse Out Transition？

2 个答案: