过渡不透明度和可见性

Question

我有一个元素是 visibility: hidden 直到悬停在上面，在不透明度上有一个过渡以实现漂亮的淡入淡出。问题是淡入淡出仅以一种方式起作用，因为当元素立即变为visibility: hidden 时，它隐藏了不透明度过渡。我该如何解决这个问题？

编辑：需要明确的是，在激活悬停之前，元素具有visibility: hidden 很重要。带有opacity: 0 的元素可以交互，而带有visibility: hidden 的元素则不能。

示例如下。注意弹出窗口是如何淡入而不是淡出的。

.hover {
  display: inline-block;
  position: relative;
}

.label {
  width: 80px;
  border: 1px solid black;
  padding: 20px;
}

.popup {
  width: 90px;
  padding: 15px;
  position: absolute;
  top: 100%;
  border: 1px dashed black;
  cursor: pointer;
  
  visibility: hidden;
  opacity: 0;
  transition: opacity 3s;
}

.hover:hover .popup {
  visibility: visible;
  opacity: 1;
}

<div class="hover">
  <div class="label">Hover me</div>
  <div class="popup">I am only visible on hover</div>
</div>

Answer 1

您只在opacity 上应用了transition，如果您需要transition 工作多个属性，您必须使用all 或使用属性名称。

只需更改下面的 css 部分

.popup {
  width: 90px;
  padding: 15px;
  position: absolute;
  top: 100%;
  border: 1px dashed black;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: all 3s; /*Change the opacity to all*/
}

.hover {
  display: inline-block;
  position: relative;
}

.label {
  width: 80px;
  border: 1px solid black;
  padding: 20px;
}

.popup {
  width: 90px;
  padding: 15px;
  position: absolute;
  top: 100%;
  border: 1px dashed black;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: all 3s; /*Change the opacity to all*/
}

.hover:hover .popup {
  visibility: visible;
  opacity: 1;
}

<div class="hover">
  <div class="label">Hover me</div>
  <div class="popup">I am only visible on hover</div>
</div>

Answer 2

.popup 类中不需要 visibility:hidden;，因为当它的不透明度为 0 时，您无论如何都看不到它。

我实际上并不知道您的具体情况。如果这不是您要查找的内容，请更具体地说明。

---

我已更新代码以满足您的情况。我使用display: none 而不是visibility:hidden 并插入一个简单的Jquery 代码。

在我看来，如果您在单击.label 时使.popup 可见，而不是将其悬停，那应该会很好。 Jquery 代码应该是

$(document).ready(function(){
    $(".label").click(function(){
        $(".popup").slideToggle("slow");
    });
});

$(document).ready(function(){
  $(".label").mouseover(function(){
   $(".popup").stop().slideDown("slow");
  });
  $(".popup").mouseout(function(){
   $(".popup").slideUp("slow");
  });
});

.hover {
  display: inline-block;
  position: relative;
}

.label {
  width: 80px;
  border: 1px solid black;
  padding: 20px;
}

.popup {
  width: 90px;
  padding: 15px;
  position: absolute;
  top: 100%;
  border: 1px dashed black;
  cursor: pointer;
  
  display: none;
  opacity: 1;
  transition: opacity 3s;
}

/*.hover:hover .popup {
  visibility: visible;
  opacity: 1;
}*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover">
  <div class="label">Hover me</div>
  <div class="popup">I am only visible on hover</div>
</div>