CSS悬停过渡不起作用

Posted 2023-03-06

【中文标题】CSS悬停过渡不起作用

【英文标题】：CSS hover transitions doesn't work

【发布时间】：2014-12-15 06:57:42

【问题描述】：

我在悬停时无法进行任何形式的过渡。我希望它在悬停在它上面时显得比突然的慢一点。所以也许只是延迟？还是安逸？无论如何，我似乎无法让这些东西发挥作用。

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

【问题讨论】：

试试这个ianlunn.github.io/Hover。你试过用谷歌搜索这个问题吗？

您还没有转换可见性属性...和转换延迟。

【参考方案1】：

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

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

【参考方案2】：

不要使用“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