我的 html 页面上有以下 div :
<div class="tooltip">
<span>content</span>
</div>
以下 css 脚本:
.tooltip span {
display:none;
}
.tooltip:hover span {
display:inline;
}
鼠标离开div后,有没有办法让跨度保持可见5秒钟?我尝试这样做的原因是因为此工具提示中包含一些内容,例如链接。
答案 0 :(得分:1)
PURE CSS
对不起,我忘了。 Display
不受转换影响。
改为使用opacity
。
使用过渡:
.tooltip span {
opacity: 0;
transition: opacity 0s 1s;
}
.tooltip:hover span {
opacity: 1;
transition: opacity 0s;
}
.tooltip span {
opacity: 0;
transition: opacity 0s 5s;
}
.tooltip:hover span {
opacity: 1;
transition: opacity 0s;
}
<div class="tooltip">
<span>content</span>
</div>
如果你希望它淡出,请使用:
.tooltip span {
opacity: 0;
transition: opacity 0s 5s;
}
.tooltip:hover span {
opacity: 1;
transition: opacity 0s;
}
.tooltip span {
opacity: 0;
border: 1px solid transparent;
transition: all .4s 4.6s;
}
.tooltip:hover span {
opacity: 1;
border: 1px solid #000;
opacity: 1;
transition: all .4s;
}
<div class="tooltip">
<span>content</span>
</div>
更新如果您有多个属性,请使用all
。注意:您通常需要具有初始属性和已更改的属性。例如。见JSFiddle(工作)
答案 1 :(得分:1)
jQuery解决方案:
$( ".tooltip" ).mouseover(function() {
$('.tooltip span').show();
setTimeout(function(){
$('.tooltip span').hide('slow', function(){
});// or fade, css display however you'd like.
}, 5000); // set visible time
});
.tooltip span {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tooltip">
tooltip
<span>content</span>
</div>
答案 2 :(得分:1)
这是我的尝试!
HTML
<div class="tooltip">
Title
<span> - content</span>
</div>
CSS
.tooltip span {
visibility: hidden;
}
.tooltip:hover span {
visibility: visible;
}
.tooltip span:not(:hover) {
visiblity: hidden;
transition: visibility 5s;
}
JSFiddle:https://jsfiddle.net/mpx3m1v4/
答案 3 :(得分:0)
.tooltip span {
//display:none;
display: block;
}
.tooltip:hover span {
//display:inline;
-webkit-animation: opacity1 0.1s 1 forwards;
animation: opacity1 0.1s 1 forwards;
}
.tooltip:not(:hover) span{
-webkit-animation: opacity0 0.1s 1 forwards;
animation: opacity0 0.1s 1 forwards;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
@-webkit-keyframes opacity1 {
to {opacity: 1; height: auto; width: auto;}
}
@keyframes opacity1 {
to {opacity: 1; height: auto; width: auto;}
}
@-webkit-keyframes opacity0 {
to {opacity: 0; height: 0; width: 0;}
}
@keyframes opacity0 {
to {opacity: 0; height: 0; width: 0;}
}