css滑过显示文字

在网页中，有时需要将鼠标滑过一个元素时，显示相应的文字提示。这种效果可以通过CSS来实现。

<div class="container">
<a href="#" class="tooltip">这是一个链接<span class="tooltiptext">这是提示文字</span></a>
</div>

首先，我们需要一个包裹元素（例如上述代码中的<div>），其中包含一个需要添加提示文字的元素（例如上述代码中的<a>）。在这个元素里，需要添加一个用于提示的元素（例如上述代码中的<span>），并通过类名进行关联。

.tooltip {
position: relative; /* 设置定位 */
display: inline-block; /* 设置为内联块状元素 */
}
.tooltip:hover .tooltiptext {
visibility: visible; /* 滑过时显示 */
}
.tooltiptext {
visibility: hidden; /* 默认隐藏 */
position: absolute; /* 设置定位 */
z-index: 1; /* 提高层级 */
background-color: black; /* 设置背景颜色 */
color: white; /* 设置文字颜色 */
padding: 5px; /* 设置内边距 */
border-radius: 5px; /* 设置边框圆角 */
top: -25px; /* 在上方显示 */
left: 50%; /* 水平居中 */
transform: translateX(-50%); /* 居中 */
}

接下来，通过CSS来设置提示文字的显示效果。首先，给需要添加提示文字的元素添加position: relative;和display: inline-block;，以便为后面绝对定位的提示文字提供参考。

然后，在鼠标滑过这个元素时（即:hover状态），通过.tooltip:hover .tooltiptext的方式来选择需要显示的提示元素，并将visibility属性设置为visible，从而使其显示出来。

最后，对提示元素进行样式的设置。首先将其visibility属性设置为hidden，以便默认情况下不显示。然后设置其position为absolute，将其定位在需要显示的位置；同时设置z-index为1，使它位于其他元素之上。接着设置背景颜色和文字颜色，并添加内边距和边框圆角。最后通过top、left和transform来进行定位和居中，实现完整的提示文字效果。

查看更多关于css滑过显示文字的详细内容...