CSS悬停时显示字 |css3 mean菜单栏

/*使用HTML的title属性悬停时显示文本*/
a:hover::before{
content: attr(title);
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
background-color: rgba(0,0,0,0.8);
color: #fff;
padding: 5px;
font-size: 14px;
}
/*使用CSS选择器悬停时显示文本*/
.button{
background-color: #4267B2;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
position: relative;
}
.button:hover::before{
content: "点击了解更多详情！";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0,0,0,0.8);
color: #fff;
padding: 5px;
font-size: 14px;
border-radius: 5px;
}

上述代码中，大家使用了伪元素和绝对定位来实现悬停显示文本的效果。其中第一段代码通过选择器选中a标签，并获取其title属性值来作为显示文本。第二段代码则选中.button类，并在其上添加伪元素，以展示特定的文本内容。通过这些写法，大家可以在页面上为用户提供更加友好的交互体验。