css實現鼠標懸浮後的提示效果

時間 2019-11-10

標籤 css 實現鼠標懸浮提示效果欄目 CSS 简体版

原文原文鏈接

1、概述css

不少時候網站中須要在鼠標劃太小圖標時，懸浮出提示性的文字。好比下圖：html

鼠標懸浮後的效果網站

這種效果能夠使用css中的僞類hover來實現。但有時候搞不清兩個元素的嵌套關係。使用了hover卻沒有效果。本人剛開始使用的時候也踩了這個坑。在此作下記錄：url

html代碼：spa

1  <body>
2     <span class="tip-img">
3       <span class="prompt-box">懸浮上來的內容</span>
4     </span>
5   </body>

css代碼：code

  .tip-img {
        display: inline-block;
        background: url("img/icon-help.png") no-repeat left center;
        height: 32px;
        position: relative;
        width: 12px;
   }
 .tip-img .prompt-box {
        background-color: #ccc;
        width:120px;
        position: absolute;
        left: 14px;
        top: 5px;
        display: none;
  }
 .tip-img:hover {
   background: url("img/icon-help-hover.png") no-repeat left center;
  }
 .tip-img:hover .prompt-box {
     display: inline-block;
  }

注意：鼠標移動上去的元素和懸浮出來的元素必定要是嵌套關係，不然使用hover沒有效果。並且被嵌套的內部元素必定要絕對定位脫離標準流，不然會影響標準流中元素的位置。htm

相關標籤/搜索