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

您仅在transition上应用了opacity，如果您需要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*/
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

visibility:hidden;课程中不需要.popup，因为当不透明度为0时，您无法看到它。

我实际上并不知道你的情况究竟是什么。如果这不是您想要的，请更具体地解释。

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

在我看来，如果您在点击.popup时显示.label，而不是将其悬停，那就不错了。 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>

过渡不透明度和可见性

2 个答案: