青青草原免费性爱视频,jk喷水17c,在线观看av免费网站,丰满少妇免费做爰大片人

Menu

江蘇純CSS實(shí)現(xiàn)文字氣泡提示效果

網(wǎng)站建設(shè) 錄入時(shí)間 2022-09-06 閱讀次數(shù) 次 無雙建站
今天來看看，如何只通過CSS實(shí)現(xiàn)下面這樣的文字氣泡提示效果。

53579c3680fb4d39a4c63b0c72bbed97.gif

核心點(diǎn)：

data-* 屬性，HTML5規(guī)范允許我們使用 data-* 屬性來嵌入自定義數(shù)據(jù)。

attr() 函數(shù)，attr()函數(shù)通常配合content屬性使用，可以返回選擇元素的屬性值。

完整代碼：

html代碼

class="text">
  請(qǐng)你打開電視看看 多少人為生命在努力勇敢的走下去。—— 
  class="tooltip" data-tip="《稻香》">周杰倫</span>
p>
css代碼

.text {
  font-size: 16px;
  margin-top: 300px;
  text-align: center;
}
.tooltip {
  position: relative;
  font-size: 14px;
  cursor: default;
}
.tooltip::before {
  content: attr(data-tip); /* 注意data-tip不加引號(hào) */
  position: absolute;
  top: -37px;
  left: 50%;
  transform: translatex(-50%);
  display: none;
  padding: 4px 8px;
  background-color: #303133;
  color: #fff;
  font-size: 12px;
  white-space: nowrap; /* 防止父元素寬度不夠，文字換行 */
  border-radius: 4px;
}
.tooltip::after {
  content: '';
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translatex(-50%) rotate(45deg);
  display: none;
  width: 10px;
  height: 10px;
  background-color: #303133;
  border-radius: 2px;
}
.tooltip:hover::before,
.tooltip:hover::after {
  display: block;
}

【版權(quán)聲明】:本站內(nèi)容來自于與互聯(lián)網(wǎng)(注明原創(chuàng)稿件除外),供訪客免費(fèi)學(xué)習(xí)需要。如文章或圖像侵犯到您的權(quán)益，請(qǐng)及時(shí)告知，我們第一時(shí)間刪除處理！謝謝！

無雙科技
如何獲取外貿(mào)詢盤和訂單？
網(wǎng)站建設(shè)咨詢：13534259410

經(jīng)典客戶案例展示

熱門服務(wù)
眾多企業(yè)的選擇

深圳無雙科技 - 專注于高端網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)開發(fā)、品牌網(wǎng)站制作

咨詢電話：13534259410

售后服務(wù)：13534259410  (7×24小時(shí))
在線 Q Q：253849310 (售前咨詢)

深圳網(wǎng)站建設(shè)咨詢
【掃一掃咨詢】
  • 掃一掃 在線咨詢
    無雙科技官方公眾號(hào)
  • 響應(yīng)式客戶端
    掃一掃 關(guān)注好友
體驗(yàn)創(chuàng)新服務(wù)

深圳無雙科技,專注于深圳網(wǎng)站建設(shè)、深圳網(wǎng)站設(shè)計(jì)、深圳網(wǎng)站制作。
服務(wù)客戶超3000家，一站式網(wǎng)站建設(shè)及推廣營(yíng)銷解決方案提供商。
我們的價(jià)值觀：誠(chéng)信、坦誠(chéng)、盡責(zé)、創(chuàng)新。期待與您合作！

您好，很高興為您服務(wù) ^_^