Day1-CSS 提示工具(Tooltip)

一、基础提示框(Tooltip)

<body style="text-align:center">
    <div class="tooltip">鼠标移动到这
        <span class="tooltiptext">提示文本span>
    div>
body>
CSS
.tooltip .tooltiptext{
    /* 可以通过用top 属性把这个文章居中,然后通过right属性把文章变到左边
            因为默认的时候是放在右边的 */
            top: -5px;
            right: 105%;
        }

二、头部提示框

 

    
    
    Document
    
    

 23333332

    

 23333332

    

 23333332

    
        鼠标移动到我这
        提示文本
    



    
    
    Document
    


    

23333332

23333332

23333332

鼠标移动到我这 提示文本
带有箭头的头部提示框

 

淡入提示框的效果,呈现出,慢慢变深的效果





菜鸟教程(runoob.com)




提示工具淡入效果

鼠标移动到以下元素,提示工具会再一秒内从 0% 到 100% 完全显示。

鼠标移动到我这 提示文本
HTML+CSS

 

 

你可能感兴趣的:(Day1-CSS 提示工具(Tooltip))