CSS实现鼠标放上去显示提示工具

风与烈酒

于 2023-11-07 15:35:33 发布

阅读量2.2k

点赞数 1

文章标签： css 前端 javascript

本文链接：https://blog.youkuaiyun.com/qingdouxiaohua/article/details/134105580

版权

本文详细介绍了如何使用CSS和HTML创建一个鼠标悬停时显示提示文本的组件，包括定位、样式和触发条件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS：

<style>
		.tooltip {
			position: relative;
			display: inline-block;
			border-bottom: 1px dotted black;
		}

		.tooltip .tooltiptext {
			visibility: hidden;
			width: 120px;
			background-color: black;
			color: #fff;
			text-align: center;
			border-radius: 6px;
			padding: 5px 0;
			position: absolute;
			z-index: 1;
			bottom: 150%;
			left: 50%;
			margin-left: -60px;
		}

		.tooltip .tooltiptext::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: black transparent transparent transparent;
		}

		.tooltip:hover .tooltiptext {
			visibility: visible;
		}
	</style>

HTML：

	<body style="text-align:center;">

		<h2>顶部提示框/底部箭头</h2>

		<div class="tooltip">鼠标移动到我这
			<span class="tooltiptext">提示文本</span>
		</div>

	</body>

这是一个鼠标放上去就可以显示提示信息的。