可以使用 CSS 中的 ::hover
伪类选择器来控制鼠标滑过超链接时的提示框样式。
首先,我们可以为超链接添加 title
属性来定义提示框的文本内容,例如:
<a href="#" title="这是一个超链接">点我</a>
然后,我们可以使用以下 CSS 代码来控制提示框的样式:
a:hover::after {
content: attr(title);
background-color: yellow;
color: black;
padding: 2px 5px;
border-radius: 3px;
position: absolute;
left: 0;
top: 100%;
z-index: 1;
}
解析:
a:hover
选择器表示鼠标滑过超链接时的状态。::after
伪元素可以在元素的内容之后插入一些内容,并用 CSS 控制其样式。content: attr(title)
表示将提示框的文本内容设置为超链接的 title
属性值。background-color
和 color
控制提示框的背景色和文本颜色。padding
控制提示框的内边距。border-radius
控制提示框的圆角半径。position: absolute
和 left: 0; top: 100%
控制提示框的位置为超链接底部居左。z-index: 1
控制提示框的堆叠顺序,使其在其他元素之上。需要注意的是,提示框的样式可以根据实际需求进行调整和修改。