CSS 悬停过渡不起作用

Question

我在悬停时遇到任何形式的过渡问题。我希望它在悬停在它上面时看起来比突然慢一点。所以也许只是延迟？还是一种轻松？无论如何，我似乎无法让这些东西发挥作用。

.forum-image {
float: left;
width: 75%;
overflow: auto;
position: relative;
opacity: 1;
transition: opacity 0.3 ease-in;
-webkit-transition: opacity 0.3 ease-in;
background-color: #dcdcdc;
}

.forum-image:hover .descriptionbox {
visibility: visible;
}

.descriptionbox {
opacity: 0.8;
background-color: #FFF;
width: 100%;
height: 100%;
visibility: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
padding: 10px;
}

<div class="forum-image">
  <img src="http://i.imgur.com/VwTgk9a.png">
    <div class="descriptionbox">
      Testtesttest
    </div>
</div>

Answer 1

不要使用“visibility:hidden”，而是尝试仅更改不透明度，如下所示:

.forum-image:hover .descriptionbox {
    opacity: 0.8;
}

然后将转换代码放在描述框上:

.descriptionbox {
    /* Other properties... */
    padding: 10px;
    opacity: 0; /* Start opacity at 0, changes when hovered... */
    transition: opacity 0.3s ease-in;
}

现在描述框具有过渡属性，当图像悬停时，将应用新的不透明度(过渡时间在原始类中设置)。然后，当鼠标离开该区域时，新的不透明度类将被删除。

确保删除

visibility: hidden;

来自原始代码，否则您将永远看不到任何东西! (一开始我试图修复它时，这把我搞砸了)

Here is a JSfiddle for demonstration