作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我目前正在尝试使用 CSS 在将鼠标悬停在某些文本上时让带有图像的淡入淡出。我应用了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>
谢谢!
最佳答案
尝试删除显示规则:
.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,因此您不需要显示:无,并且您无法在完全不显示和内联之间进行转换,因为它们是不同的类型。
并修改这条规则:
.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/
这就是你想要的吗?
关于CSS 悬停时淡入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17561410/
我是一名优秀的程序员,十分优秀!