过渡不透明度和可见性

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代码。

在我看来，如果您使.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>