13534259410
熱門服務
眾多企業的選擇
純CSS實現文字氣泡提示效果
網站建設
2022-09-06
次
今天來看看，如何只通過CSS實現下面這樣的文字氣泡提示效果。
核心點：
data-* 屬性，HTML5規范允許我們使用 data-* 屬性來嵌入自定義數據。attr() 函數，attr()函數通常配合content屬性使用，可以返回選擇元素的屬性值。完整代碼：
html代碼class="text">
請你打開電視看看 多少人為生命在努力勇敢的走下去。——
class="tooltip" data-tip="《稻香》">周杰倫</span>
p>
.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不加引號 */
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;
}【版權聲明】:本站內容來自于與互聯網(注明原創稿件除外),供訪客免費學習需要。如文章或圖像侵犯到您的權益，請及時告知，我們第一時間刪除處理！謝謝！
? 猜您喜歡
- 外貿建站
- 東南亞語種
- 小語種建站
- 外貿推廣系統
- 海外營銷系統
- 外貿網站建設
- 海外獨立站建設
- 海外推廣
- 獨立站
- 跨境電商
- 外貿獨立站
- google詢盤
- wordpress建站
- wordpress教程
- 獨立站教程
- wordpress翻譯插件
- 多語種獨立站
- SSL證書
- 外貿網站
- 網站建設
- wordpress獨立站
- Google谷歌
- 獨立站搭建
- GoogleAds
- 關鍵詞規劃師
- googleads推廣
- 網站轉化率低
- 獨立站轉化低wordpress翻譯插件
- 獨立站費用
- 獨立站需要多少錢
- 外貿獨立站費用清單
- wordpress插件
- Sopify
- Ueeshop
- SaaS建站
- WordPress外貿網站
- wordpress獨立站wordpress翻譯插件
- shopify
- 轉化率
- 跨境電商wordpress翻譯插件
? 網站建設知識
? SEO/SEM推廣
? 常見問題
