成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS 提示工具(Tooltip)

ACb0y / 2464人閱讀

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

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

（還在新手階段代碼有點(diǎn)惡心見諒）

一、提示內(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%;
    
    
    
}

（還在新手階段代碼有點(diǎn)惡心見諒）

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116900.html

相關(guān)文章

  • css--提示工具

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

    shadajin 評(píng)論0 收藏0

  • css--提示工具

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

    xinhaip 評(píng)論0 收藏0

  • CSS 提示工具(Tooltip)

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

    cc17 評(píng)論0 收藏0

  • CSS 提示工具(Tooltip)

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

    Shisui 評(píng)論0 收藏0

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

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

    wmui 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<