欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS模擬 html 的 title 屬性(鼠標懸浮顯示提示文字效果)

  發(fā)布時間：2025-03-10 11:08:17   作者：朝陽39   我要評論
本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實現(xiàn)了提示內(nèi)容的隱藏和顯示，感興趣的朋友一起看看吧
效果

原理
  • 提示內(nèi)容的定位：子絕父相
  • 鼠標懸浮前，提示內(nèi)容visibility: hidden;
  • 通過 :hover 觸發(fā)鼠標懸浮樣式，提示內(nèi)容變?yōu)?visibility: visible;
代碼
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS 模擬 HTML title 效果（兼容舊瀏覽器）</title>
    <style>
      /* 基本樣式設(shè)置 */
      .tipBox {
        position: relative;
        display: inline-block;
      }
      /* 定義提示框樣式，初始隱藏 */
      .tipBox .tipContent {
        position: absolute;
        top: 100%;
        left: 50%;
        color: rgb(105, 100, 100);
        background-color: #f9f9f9;
        border: 1px solid #ccc;
        border-radius: 2px;
        font-size: 12px;
        padding: 2px 4px;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
        white-space: nowrap;
        visibility: hidden;
      }
      /* 鼠標懸停時顯示提示框 */
      .tipBox:hover .tipContent {
        visibility: visible;
      }
    </style>
  </head>
  <body style="padding: 40px">
    <h1>title 效果</h1>
    <div title="12345678">12345678</div>
    <h1>css 模擬 title 效果</h1>
    <div class="tipBox">
      12345678
      <div class="tipContent">12345678</div>
    </div>
  </body>
</html>

到此這篇關(guān)于CSS模擬 html 的 title 屬性(鼠標懸浮顯示提示文字效果)的文章就介紹到這了,更多相關(guān)css html title屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論