亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS 提示工具(Tooltip)

ACb0y / 2539人閱讀

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

本文的內(nèi)容為使用 HTML 與 CSS 來創(chuàng)建提示工具，提示工具在鼠標移動到指定元素后觸發(fā)。這個提示工具可以使我們排出的網(wǎng)頁增加美感，也可以提升用戶的可讀性。（提示工具可以四周提示這里只演示上和右，左和下的同理調(diào)調(diào)距離就可以實現(xiàn)了） 一、提示內(nèi)容在上面 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%;
    
    
    
}

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

一、提示內(nèi)容在右面 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%;
    
    
    
}

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/116900.html

相關(guān)文章

  • css--提示工具

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

    shadajin 評論0 收藏0

  • css--提示工具

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

    xinhaip 評論0 收藏0

  • CSS 提示工具(Tooltip)

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

    cc17 評論0 收藏0

  • CSS 提示工具(Tooltip)

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

    Shisui 評論0 收藏0

  • 如何使用CSS創(chuàng)建巧妙的動畫提示框

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

    wmui 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<