CSS 悬停时淡入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17561410/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Fade in on hover
提问by Bliss L. Ng
I'm currently attempting to have a with an image fade in when I hover over some text using CSS. I've applied the CSS code, but the effect doesn't show; the div appears, but without the fade-in.
当我使用 CSS 将鼠标悬停在某些文本上时，我目前正在尝试使图像淡入。我已经应用了 CSS 代码，但没有显示效果；div 出现，但没有淡入。
Also, I realize that CSS transitions don't really work with IE. If anyone could point me in the right direction of a workaround for that, it would be much appreciated. (:
另外，我意识到 CSS 转换并不真正适用于 IE。如果有人能为我指出解决方法的正确方向，我将不胜感激。(:
CSS:
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:
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>
Thank you!
谢谢！
回答by
Try with removing your display rule:
尝试删除您的显示规则：
.thumbnail span{ /*CSS for enlarged image*/
position: relative;
/*display: none; remove this */
color: black;
text-decoration: none;
opacity:0.0;
filter:alpha(opacity=0);
}
As you have opacity 0 you won't need display:none and you can't make a transition between not displayed at all to inlined as they are different types.
由于您的不透明度为 0，因此您不需要 display:none 并且您无法在根本不显示到内联之间进行转换，因为它们是不同的类型。
And modify this rule:
并修改此规则：
.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;
}
(the hover and then span can make it a bit jumpy).
（悬停然后跨度可以使它有点跳跃）。
I also added a ms prefixed version to transitions. It is apparently not useful in this context.
我还为转换添加了一个 ms 前缀版本。在这种情况下它显然没有用。
For IE9 and below you can use jQuery to fade in an element (or simply use vanilla JavaScript to modify the opacity in a setTimeout loop).
对于 IE9 及以下版本，您可以使用 jQuery 来淡入元素（或者简单地使用 vanilla JavaScript 来修改 setTimeout 循环中的不透明度）。
Fiddle here:
http://jsfiddle.net/AbdiasSoftware/9rCQv/
在这里小提琴：http:
//jsfiddle.net/AbdiasSoftware/9rCQv/
Is this what you're after?
这是你追求的吗？
