使用css或javascript悬停几秒钟后显示一条消息[重复]

Posted 2023-05-08

【中文标题】使用css或javascript悬停几秒钟后显示一条消息[重复]

【英文标题】：Show a message after a few seconds hover using css or javascript [duplicate]

【发布时间】：2020-12-11 04:55:02

【问题描述】：

我的问题：

当用户将鼠标悬停在文本的某个部分上时，我希望几秒钟后显示一条消息。如果可能的话，我理想情况下希望它全部使用 CSS，但 javascript 也可以。

例如：假设用户将鼠标悬停在单词 book 上。 2 秒后会弹出一条消息，上面写着“所有人都在阅读书籍”。

我尝试过的

我查看了工具提示，您可以在其中显示悬停消息

HTML

    <div class="tooltip">Book
      <span class="tooltiptext">Books are read by everyone</span>
    </div>

CSS

.tooltip 
      position: relative;
      display: inline-block;
      text-align: center;
    

    .tooltip .tooltiptext 
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;

      /* Position the tooltip */
      position: absolute;
      z-index: 1;
    

    .tooltip:hover .tooltiptext 
      visibility: visible;
    



.tooltip 
  position: relative;
  display: inline-block;
  text-align: center;


.tooltip .tooltiptext 
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;


.tooltip:hover .tooltiptext 
  visibility: visible;

<div class="tooltip">Book
      <span class="tooltiptext">Books are read by everyone</span>
    </div>




<!-- end snippet -->

但是，我不知道如何在给定时间后显示工具提示。

【参考方案1】：

我做的CSS方案如下

在这里我创建了一个动画，在开始时将 visibility 设置为 visible

@keyframes effect 
  0% 
    visibility: visible;
  

然后在悬停选择器上添加这个动画，其中 effect 是名称 1s，是持续时间（必须设置以便设置可见性），infinite 使动画继续进行，直到您将鼠标移出元素，并且 2s 是这里最重要的一个，因为它设置了延迟。

.tooltip:hover .tooltiptext 
  animation: effect 1s infinite 2s;