<a href=""><img src=""><span>content</span></a>
在这里,当我将鼠标悬停在图像上时,跨度内容通过使用相对位置显示无和跨度标记中的绝对位置来显示。现在,我的问题是,当我悬停在图像上时,我需要过渡效果。为此,什么是 css。请帮我。
<a href=""><img src=""><span>content</span></a>
在这里,当我将鼠标悬停在图像上时,跨度内容通过使用相对位置显示无和跨度标记中的绝对位置来显示。现在,我的问题是,当我悬停在图像上时,我需要过渡效果。为此,什么是 css。请帮我。
尝试在display:none
和之间转换的一种替代方法display:block
visibility: hidden;
是在and之间转换visibility:visible
请参阅这篇文章,其中指出:
尽管 CSS 基本框模型规范说“Animatable: no”,但可见性仍然存在动画</p>
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 的工具提示。