<strike id="akk0w"></strike>

<ul id="akk0w"></ul>

CSS 提示工具(Tooltip)

ACb0y 發布于2019-08-30 15:54 / 2365人閱讀

摘要：本文的內容為使用與來創建提示工具，提示工具在鼠標移動到指定元素后觸發。這個提示工具可以使我們排出的網頁增加美感，也可以提升用戶的可讀性。

本文的內容為使用 HTML 與 CSS 來創建提示工具，提示工具在鼠標移動到指定元素后觸發。這個提示工具可以使我們排出的網頁增加美感，也可以提升用戶的可讀性。（提示工具可以四周提示這里只演示上和右，左和下的同理調調距離就可以實現了） 一、提示內容在上面 1<效果圖敬上>

2<代碼敬上>




    
    
    


    
        

        

        

        

        

        

        

        

        

        

        

        

        顯示
        
        
        qwert

        qwertadsfadfa

        qwert

        qwert

        qwert

        qwert

        qwert

        
    


body{
    margin:0;
    text-align:center;
}
.q{
    
    display:inline-block;
    position:relative;
}
.w{
    
    padding:15px;
    display:inline-block;
    background-color:green;
    color:white;
}
.q:hover .neirong{
    /* display:block; */
    opacity:1;
    transition:1s;
}
.neirong{
    /* display:none; */
    opacity:0;
    
    background:#666;
    color:white;
    
    border-radius:5px;
    
    position:absolute;
    text-align:center;
    left:-130%;
    top:18%;
    
    min-width:100px;
    
    margin-left:70%;
    
    padding:15px;
    
}
.jiantou{
    width:0px;
    height:0px;
    
    border:10px solid;
    border-color:#666 transparent transparent transparent;
    
    margin:0 auto;
    
    position:absolute;
    top:177px;
    left:40%;
    
    
    
}

（還在新手階段代碼有點惡心見諒）

一、提示內容在右面 1<效果圖敬上>

2<代碼敬上>




    
    
    


    
        

        

        

        
        顯示
        
        
        qwert

        qwertadsfadfasdasdd

        qwert

        qwert

        qwert

        qwert

        qwert

        
    


body{
    margin:0;
    text-align:center;
}
.q{
    
    display:inline-block;
    position:relative;
}
.w{
    padding:15px;
    display:inline-block;
    background-color:green;
    color:white;

   
}
.q:hover .neirong{
    /* display:block; */
    opacity:1;
    transition:1s;

}
.neirong{
    /* display:none; */
    opacity:0;
    
    background:#666;
    color:white;
    
    border-radius:5px;
    
    position:absolute;
    text-align:center;
    left:60%;
    top:5%;
    
    min-width:100px;
    
    margin-left:60%;
    
    padding:15px;
    
    
}
.jiantou{
    width:0px;
    height:0px;
    
    border:10px solid;
    border-color:transparent #666 transparent transparent;
    
    margin:0 auto;
    
    position:absolute;
    top:70px;
    left:-10%;
    
    
    
}

（還在新手階段代碼有點惡心見諒）

GPU云服務器云服務器 tooltip提示提示工具 css工具 css開發工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116900.html

css--提示工具

摘要：一提示工具上提示工具代碼如下上提示工具提示文本運行結果二右提示工具代碼如下提示工具右提示工具提示文本運行結果總結使用容器元素并添加類。在鼠標移動到上時顯示提示信息。屬性用于為提示框添加圓角。一、提示工具 1、上提示工具代碼如下 body{ margin:0; text-align:center; ...

shadajin 2019-08-02 10:55 評論0 收藏0
css--提示工具

摘要：一提示工具上提示工具代碼如下上提示工具提示文本運行結果二右提示工具代碼如下提示工具右提示工具提示文本運行結果總結使用容器元素并添加類。在鼠標移動到上時顯示提示信息。屬性用于為提示框添加圓角。一、提示工具 1、上提示工具代碼如下 body{ margin:0; text-align:center; ...

xinhaip 2019-08-30 15:54 評論0 收藏0
CSS 提示工具(Tooltip)

摘要：提示工具本文為大家介紹如何使用和來實現提示工具，提示工具在鼠標移動到制定元素后觸發先看下面示例基礎提示工具代碼如下右提示工具右提示工具提示工具運行結果如下圖添加箭頭我們可以用偽元素及屬性為提示工具創建一個小箭頭標志，箭頭是 CSS 提示工具(Tooltip) 本文為大家介紹如何使用HTML和CSS來實現提示工具，提示工具在鼠標移動到制定元素后觸發,先看下面示例： showImg(ht...

cc17 2019-08-02 10:55 評論0 收藏0
CSS 提示工具(Tooltip)

摘要：提示工具本文為大家介紹如何使用和來實現提示工具，提示工具在鼠標移動到制定元素后觸發先看下面示例基礎提示工具代碼如下右提示工具右提示工具提示工具運行結果如下圖添加箭頭我們可以用偽元素及屬性為提示工具創建一個小箭頭標志，箭頭是 CSS 提示工具(Tooltip) 本文為大家介紹如何使用HTML和CSS來實現提示工具，提示工具在鼠標移動到制定元素后觸發,先看下面示例： showImg(ht...

Shisui 2019-08-30 15:54 評論0 收藏0
如何使用CSS創建巧妙的動畫提示框

摘要：我們巧妙的提示框打算使用屬性選擇器也就是方括號表示法。相對性這是用在提示框的父元素上的。向上向下提示框要用到關鍵幀，而向左向右提示框使用關鍵幀。注意，在這些關鍵幀中，我們只定義了提示框所需的終止狀態。原文：https://webdesign.tutsplus.co...原作：Jase Smith翻譯：Stypstive 當你的用戶需要漂亮的圖標給出額外的文字信息時，亦或是當他們在點擊...

wmui 2019-08-29 12:51 評論0 收藏0