CSS【實戰】模擬 html 的 title 屬性（鼠標懸浮顯示提示文字）

效果

在這里插入圖片描述

原理

提示內容的定位：子絕父相
鼠標懸浮前，提示內容visibility: hidden;
通過 :hover 觸發鼠標懸浮樣式，提示內容變為 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>/* 基本樣式設置 */.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>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/71774.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/71774.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/71774.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！