CSS悬停转换不起作用

我在获取此悬停的任何形式的转换时遇到问题。我希望它在显示时稍微慢一点，而不是突然停下来。所以也许只是延迟？还是轻松点？无论如何，我似乎无法得到任何这些东西的工作。CSS悬停转换不起作用

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

来源

2014-10-20 pinkbutterfly

试试这个http://ianlunn.github.io/Hover。你有没有试过用Google搜索这个问题？ – parth6 2014-10-20 10:18:09

您尚未转换可见性属性...和转换延迟。 – 2014-10-20 10:18:16

而不是使用 “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; 
}

现在说明框有tr应答属性，当图像悬停时，应用新的不透明度（在原始类中设置转换时间）。然后，当鼠标退出该区域时，新的不透明度类将被删除。

务必从原来的代码中删除

visibility: hidden;

，否则你永远也看不到任何东西！（这搞砸我起初当我试图修复它）

Here is a JSfiddle for demonstration

来源

2014-10-20 10:23:02

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

来源

2014-10-20 10:25:28 dizel3d

CSS悬停转换不起作用

回答

相关问题