国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css--提示工具

xinhaip / 3096人閱讀

摘要：一提示工具上提示工具代碼如下上提示工具提示文本運(yùn)行結(jié)果二右提示工具代碼如下提示工具右提示工具提示文本運(yùn)行結(jié)果總結(jié)使用容器元素并添加類。在鼠標(biāo)移動到上時(shí)顯示提示信息。屬性用于為提示框添加圓角。

一、提示工具 1、上提示工具 代碼如下 
     
     body{
         margin:0;
         text-align:center;
         
     }
     
     .tooltip{
         position:relative;
         display:inline-block;
     }
     
     
     .tooltip .ze{
        display:block;
        width:100px;
        height:40px;
        background:#0f0;
        padding-top:20px;
        color:#fff;
    
        
     }
     
     .tooltip .yu{
        
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        margin-left: -60px;
        
        opacity:0;
        transition: opacity 1s;
     }
     
     
     .tooltip .yu::after{
         content:"";
         position:absolute;
         top:100%;
         left:50%;
         margin-left:-5px;
         border-width:5px;
         border-style:solid;
         border-color: black transparent transparent transparent;
         
         
     }
     
     
    .tooltip:hover .yu{
        visibility:visible; 
            opacity:1;
     }
    
    
    
     

     

     

     

     

     

     

     

     

        

            
上提示工具

            提示文本
運(yùn)行結(jié)果

二、右提示工具 代碼如下





提示工具




















    
右提示工具

    提示文本


運(yùn)行結(jié)果

總結(jié)：

HTML) 使用容器元素 (like

) 并添加 "tooltip" 類。在鼠標(biāo)移動到
上時(shí)顯示提示信息。

提示文本放在內(nèi)聯(lián)元素上(如 ) 并使用class="tooltiptext"。

CSS)tooltip 類使用 position:relative, 提示文本需要設(shè)置定位值 position:absolute。 注意: 接下來的實(shí)例會顯示更多的定位效果。

tooltiptext 類用于實(shí)際的提示文本。模式是隱藏的，在鼠標(biāo)移動到元素顯示 。設(shè)置了一些寬度、背景色、字體色等樣式。

CSS3 border-radius 屬性用于為提示框添加圓角。

:hover 選擇器用于在鼠標(biāo)移動到到指定元素

上時(shí)顯示的提示。

添加箭頭我們可以用CSS 偽元素 ::after 及 content 屬性為提示工具創(chuàng)建一個(gè)小箭頭標(biāo)志，箭頭是由邊框組成的，但組合起來后提示工具像個(gè)語音信息框。

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116930.html

相關(guān)文章

  • CSS 提示工具(Tooltip)

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

    cc17 評論0 收藏0

  • CSS 提示工具(Tooltip)

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

    Shisui 評論0 收藏0

  • css--提示工具

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

    shadajin 評論0 收藏0

  • CSS 提示工具(Tooltip)

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

    ACb0y 評論0 收藏0

  • stylus css tooltips 工具提示

    摘要：純工具提示查看效果演示安裝使用在中使用常規(guī)使用方法直接在頁面中引用我是提示在頁面中使用工具提示工具提示工具提示還可以這樣提示還可以這樣提示新增背景顏色提示開發(fā) tooltips showImg(https://jaywcjlove.github.io/sb/ico/stylus.svg); showImg(http://jaywcjlove.github.io/sb/license/m...

    singerye 評論0 收藏0

發(fā)表評論

0條評論

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