CSS修改鼠标悬停时title属性的展示样式

你六我里六六

已于 2022-07-15 17:29:52 修改

阅读量6.1k

点赞数 1

文章标签： css 前端 javascript

于 2022-07-15 17:28:12 首次发布

本文链接：https://blog.csdn.net/weixin_53874202/article/details/125809223

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.box {
				width: 200px;
				height: 200px;
				background-color: #1890ff;
				margin: 50px auto;
				/* 父亲开相对 */
				position: relative;
			}
			/* 儿子开绝对 */
			p {
				color: #fff;
				position: absolute;
				top: 80px;
				left: 40px;
			}
			/* hover开相对 */
			p:hover {
				color: rgba(0, 255, 255, 1);
				position: relative;
				cursor: pointer;
			}
			/* after开绝对 */
			p[title]:hover:after {
				content: attr(title);
				color: #fff;
				padding: 4px 8px;
				position: absolute;
				left: 0;
				top: -160%;
				z-index: 20;
				white-space: nowrap;
				background-color: rgba(37, 39, 42, .85);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p title="hellotitle">hello world</p>
		</div>
	</body>
</html>