摘要 :
本文主要讲解关于CSS如何修改鼠标悬停时title属性的样式相关内容，让我们来一起学习下吧！ 将默认的title属性自定义为showtitle，然后对showtitle修改样式。 如果使用默……
本文主要讲解关于CSS如何修改鼠标悬停时title属性的样式相关内容，让我们来一起学习下吧！
将默认的title属性自定义为showtitle，然后对showtitle修改样式。
如果使用默认的title，默认的样式也会展示。
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>Document</title>
<style>
p:hover {
position: relative;
cursor: pointer;
}
p[showtitle]:hover:after {
line-height: 1.25;
content: attr(showtitle);
color: #fff;
padding: 2px 8px;
position: absolute;
left: 10%;
top: 100%;
z-index: 20;
white-space: pre-wrap;
background-color: rgba(37, 39, 42, .85);
}
</style>
</head>
<body>
<p showtitle=\"展示悬停的样式\">展示悬停的样式</p>
</body>
</html>
效果如图所示：
以上就是关于CSS如何修改鼠标悬停时title属性的样式相关的全部内容，希望对你有帮助。欢迎持续关注潘子夜个人博客（www.panziye.com），学习愉快哦！
还没有评论呢，快来抢沙发~