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

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 worldp>
		div>
	body>
html>


CSS修改鼠标悬停时title属性的展示样式_第1张图片

你可能感兴趣的:(css,前端,javascript)