css--提示工具

shadajin 發布于2019-08-02 10:55 / 2858人閱讀

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

一、提示工具 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;
     }
    
    
    
     

     

     

     

     

     

     

     

     

        
            上提示工具
            提示文本

運行結果

二、右提示工具 代碼如下

提示工具


    右提示工具
    提示文本

運行結果

總結：

HTML) 使用容器元素 (like

) 并添加 "tooltip" 類。在鼠標移動到

上時顯示提示信息。

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

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

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

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

:hover 選擇器用于在鼠標移動到到指定元素

上時顯示的提示。

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

GPU云服務器云服務器提示工具 css工具 css開發工具 MSN消息提示提示

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

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

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--提示工具

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

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

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

ACb0y 2019-08-30 15:54 評論0 收藏0
stylus css tooltips 工具提示

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

singerye 2019-08-30 12:57 評論0 收藏0