在：hover上显示隐藏的div，并使div在CSS / CSS3上移出鼠标后5秒钟保持可见

Question

我的html页面上有以下div ：

<div class="tooltip">
    <span>content</span>
</div>

和以下css脚本：

.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:inline;
}

有没有一种方法可以使鼠标离开div后使跨度保持可见5秒钟以上？ 我尝试执行此操作的原因是因为此工具提示中包含一些内容，例如链接。

Answer 1

纯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> 

如果您有多个属性， UPDATE将all使用。 注意：通常需要具有初始属性和更改后的属性。 例如，参见JSFiddle （正在工作）

Answer 2

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> 

Answer 3

这是我的尝试！

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/

Answer 4

纯CSS。 这不是完美的。 尝试这个。

.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;}
}