在 :hover 上显示隐藏的 div，并使 div 在 CSS / CSS3 鼠标悬停后保持可见 5 秒答案

【问题标题】：Show hidden div on :hover, and make div stay visible for 5 seconds after mouseout on CSS / CSS3在 :hover 上显示隐藏的 div，并使 div 在 CSS / CSS3 鼠标悬停后保持可见 5 秒
【发布时间】：2017-05-23 08:21:55
【问题描述】：

我的 html 页面上有以下 div：

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

还有以下 css 脚本：

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

有没有办法让跨度在鼠标离开 div 后保持可见 5 秒以上？我之所以尝试这样做是因为此工具提示中有一些内容，例如链接。

【问题讨论】：

你需要添加一些js。 developer.mozilla.org/en-US/Add-ons/Code_snippets/Timers
@hunzaboy 真的吗？这不能在 css / css3 上完成？
您可以这样做，但方法可能不同。阅读这里stackoverflow.com/questions/21993661/…
您可以尝试使用opacity 和transition，但我认为这不是您要搜索的内容。此处示例：jsfiddle.net/3zaz28L6
@hunzaboy 是的，这不是我真正想要的，可见性和不透明度对我来说不是很有帮助......不过感谢您的研究！

标签： html css tooltip duration

【解决方案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（工作中）

【讨论】：

嗨@ChrisHappy，我对其进行了测试，它在 5 秒后确实消失了，但是如果跨度有其他属性，例如 position: absolute;、边框、背景等...我应该添加 @987654332 @他们也一样？

【解决方案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>

【讨论】：

您只需要提供基于 css 的解决方案

【解决方案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/

【讨论】：

【解决方案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;}
}

【讨论】：