css3鼠标停留出现文字标题

CSS3是一个强大的前端技术，可用于可视化网站设计。其中一个非常酷的功能是鼠标悬停时，在元素上显示隐藏的文本。这种效果可以轻松为网站增加互动性和视觉效果。

.hover-effect {
    position: relative;
    display: inline-block;
}

.hover-effect:hover:after {
    content: attr(data-content);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 5px 10px;
    white-space: Nowrap;
}

以上代码可以为任何元素添加效果，只需添加类“hover-effect”，并在其上方添加“data-content”属性。

例如，在一个标题元素中添加效果:

标题

当鼠标悬停在标题上时，出现文本“我是文字”。这是通过使用伪元素:after以及CSS属性content来实现的。我们也使用position和transform属性来调整出现的位置，并使用background和color属性来设置背景颜色和文字颜色。

这是一个简单而令人印象深刻的CSS3效果，可以轻松地为网站增加视觉效果，并为用户提供更多的信息。尝试为您的网站添加类似的效果，以吸引更多的访问者！