css 鼠标拂过出现解释 |css 打印背景

/* 定义一个带有解释框的类名为 tooltip 的样式 */
.tooltip {
position: relative;
display: inline-block;
}
/* 定义解释框的样式 */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s; /* 遮罩层渐隐渐显的时间 */
}
/* 鼠标拂过时解释框的显示样式 */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

以上代码中，首先定义了一个类名为 tooltip 的样式，这个样式用于包裹需要展示拂过解释的元素。其次，通过定义一个类名为 tooltiptext 的样式，来指定鼠标拂过时需要展示的解释框的样式。最后，在 :hover 伪类中来定义鼠标拂过元素时需要应用的样式，其中包括了解释框的可见性和透明度。

以上就是通过 CSS 实现鼠标拂过出现解释的方法。需要注意的是，在使用该效果时，大家需要在 HTML 中定义好需要展示解释框效果的元素，并且需要在该元素的 class 中添加 tooltip 这个类名，以便 CSS 正确地应用样式。