跨度的图像悬停过渡
<a href=""><img src=""><span>content</span></a>
在这里，当我将图像悬停在图像上时，跨度内容通过使用相对于显示无的位置和绝对位置显示在span标签中。 现在，我的问题是，当我徘徊在图像上时，我需要过渡效果。 为此，什么是CSS。 请帮帮我。
你不能过渡display: none;元素display: none; display: block; 所以你需要使用opacity属性...
失败
通行证
更好的演示在行动
.example1 {
border: 1px solid #f00;
height: 30px;
}
.example1 span {
opacity: 0;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
.example1:hover span {
opacity: 1;
}
尝试在display:none和display:block之间切换的一种替代方法
是在visibility: hidden;之间转换visibility: hidden; 和visibility:visible
看到这篇文章说：
尽管CSS Basic Box Model规范说“Animatable：no”
a.tip2 {
position: relative;
text-decoration: none;
}
a.tip2 span {display: none;
opacity: 0;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
a.tip2:hover span {
display: block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: 120px;
text-align: center;
width: 162px;
height:auto;
top: -247px;
left: 70px;
background: rgba(0,0,0,.8);
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
color: #fff;
font-size: .86em;
opacity: 1;
}
a.tip2:hover span:after {
position: absolute;
display: block;
content: "";
border-color: rgba(0,0,0,.8) transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom: -16px;
left:1em;
}
这是我的CSS，实际上我忘了说一件事。 这是一个使用纯CSS的工具提示。
链接地址: http://www.djcxy.com/p/83657.html