本文介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示，感兴趣的朋友一起看看吧
效果
原理
- 提示内容的定位：子绝父相
- 鼠标悬浮前，提示内容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> |