CSS的hover属性可以让我们实现当鼠标经过文本时出现提示框的效果。
/* CSS代码 */ .tooltip { position: relative; display: inline-block; } .tooltip:hover::before { content: attr(data-tooltip); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding: 4px 8px; background: #333; color: #fff; font-size: 14px; border-radius: 4px; white-space: nowrap; }
其中,我们先将需要添加提示框的文本包裹在一个class为tooltip的元素中,然后使用hover伪类来定义鼠标经过时的样式。
我们在tooltip元素的before伪元素中添加content属性来指定提示框中的内容,同时使用position: absolute使其脱离文档流,top: 100%来让其位于tooltip下方,left: 50%以及transform: translateX(-50%)来使其水平居中,padding、background、color、font-size以及border-radius用于美化提示框,white-space: nowrap可以让文本不换行。
这样,当鼠标经过tooltip元素时,便会出现一个提示框,丰富了页面的交互体验。