使用css伪类实现tip提示效果

最新推荐文章于 2024-09-20 16:09:38 发布

S117

最新推荐文章于 2024-09-20 16:09:38 发布

阅读量353

点赞数

分类专栏： CSS学习笔记文章标签： css javascript div 浏览器测试 ie

本文链接：https://blog.csdn.net/longtian1213/article/details/7850290

版权

CSS学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在页面开发中，经常需要做一些提示效果，可以使用javascript来实现，如果觉得用javascript比较复杂，也可以使用CSS来实现，如果你确定你的网页不会在IE6及以下的浏览器中使用，就可以这么做。要使用css来实现，就要用到:hover，这个属性表示的是当鼠标悬浮在元素上方时，向元素添加样式。所以我们可以用它来实现：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<style type="text/css">
			div span{
				display: none;
			}
			div:hover span{
				display: block;
				border: 1px solid black;
				width: 100px;
				text-height: 14px;
			}
		</style>
	</head>
	<body>
		<div>
			测试CSS提示<span>这是一个CSS提示框</span>
		</div>
	</body>
</html>

在代码中，我们把DIV的span标签内容先隐藏起来，当鼠标移动到div上时利用:hover属性给span换一个样式，让它显示出来，这样就做成了一个简单的CSS提示效果。在使用CSS伪类的时候，有三点需要注意的：

1：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。