可以使用 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 控制提示框的堆叠顺序,使其在其他元素之上。需要注意的是,提示框的样式可以根据实际需求进行调整和修改。