在页面开发中,经常需要做一些提示效果,可以使用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 之后,才是有效的。
2:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
3:伪类名称对大小写不敏感。