如何在几秒钟之后隐藏此CSS工具提示而不使用jquery或javascript？ [英] How to hide this CSS tooltip after some seconds without using jquery or javascript?

问题描述

使用CSS样式在3秒后隐藏工具提示



我尝试过：

hide tooltip after 3seconds using CSS styles

What I have tried:

[data-tip]{
    position:relative;
    }
     [data-tip]:hover{
    text-decoration:none;

   
    }
     [data-tip]:after{
    content: "Home";
    font-family:Arial, Helvetica, sans-serif;
    font-size:90%;
    line-height:1.2em;
    color:#004562;
    font-weight:bolder;
    font-size:12px;
    text-align:center;
     height:13px;
    width:auto;
    padding:5px 10px;
    border-color:white;
    /*flex-direction:row;*/
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
     background: linear-gradient(#A4C2E4 30%, #F0F5FA, #F0F5FA);
    position:absolute;
     box-shadow: 4px 4px 4px rgba(0,0,0, .65);
    top:23px;
    left:-30px;
    display:none;

    
    }
     [data-tip]:hover{
    z-index:1000;
    position:relative;
    color:#8325f7;

   
    }
     [data-tip]:hover:after{
    display:block;

      
    }
     [data-tip]:hover:before{
    display:block;


    }

推荐答案

[data-tip]：悬停：{

显示：无;





}

[data-tip]:hover:after{
display:none;


}

这篇关于如何在几秒钟之后隐藏此CSS工具提示而不使用jquery或javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！