CSS悬停淡入效果

Question

CSS悬停淡入效果

8

我目前正在尝试使用CSS让文本悬停时带有图像的div淡入。我已经应用了CSS代码，但是效果没有显示出来；div出现了，但是没有淡入效果。

此外，我意识到CSS转换在IE中不太有效。如果有人能指引我一个解决方法，那将不胜感激。(:

CSS：

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: relative;
display: none;
color: black;
text-decoration: none;
opacity:0.0;
filter:alpha(opacity=0);
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 5px;
left: -1000px;
border: 1px solid gray;
background-color: #fff;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
position: relative;
display: inline;
top: -290px;
left: -25px; 
opacity:1.0;
filter:alpha(opacity=100);/*position where      
enlarged image should offset horizontally */
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

#networking {
width: 200px; 
height: 140px; 
margin-left: 360px; 
top: 115px; 
position: absolute; 
background-color: #613286; 
opacity:1.0;
filter:alpha(opacity=100); 
color: #ffffff; 
text-align:center; 
border-radius: 20px; 
-webkit-transform: rotate(14deg);
-moz-transform: rotate(14deg);
-ms-transform: rotate(14deg);
-o-transform: rotate(14deg);
transform: rotate(14deg);
}

HTML:

<div id="networking">
<a class="thumbnail" href="1.5.2experientialstudios.html#down4"><h4>Networking Lounge</h4>    
<span><img src="images/net3.jpg" width="250" /></span></a>
</div>

谢谢你！

- Bliss L. Ng

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1693593 · Accepted Answer

尝试移除你的显示规则：

.thumbnail span{ /*CSS for enlarged image*/
    position: relative;

    /*display: none; remove this */

    color: black;
    text-decoration: none;
    opacity:0.0;
    filter:alpha(opacity=0);
}

由于您的不透明度为0，因此您不需要使用display:none，并且您无法在完全未显示和内联显示之间进行过渡，因为它们是不同类型。

并修改此规则：

.thumbnail:hover span { /*CSS for enlarged image on hover*/

    top: 0px; /* adjust as needed */
    left: -25px; 
    opacity:1.0;
    filter:alpha(opacity=100);/*position where      
    enlarged image should offset horizontally */
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

（悬停然后跨度会使它有点抖动）。

~~我还添加了一个ms前缀版本的转换。显然在这种情况下没有用。~~

对于IE9及以下版本，您可以使用jQuery淡入元素（或仅使用vanilla JavaScript在setTimeout循环中修改不透明度）。

这里是Fiddle：
http://jsfiddle.net/AbdiasSoftware/9rCQv/

这是你想要的吗？