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

Answer 2

＆＃13;

.forum-image {
    position: relative;
    display: inline-block;
}

.descriptionbox {
    position: absolute;
    background: #ffffff;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    
    -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
    transition: opacity 1s;
}

.descriptionbox:hover {
    opacity: 1;    
}

＆＃13;

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

＆＃13;

CSS悬停过渡不起作用

2 个答案: