css :hover伪类选择器实例分析

时间:2016-08-07
css :hover伪类选择器用于设置鼠标悬停在某一html元素上时的css样式,本文章向大家介绍:hover选择器的基本使用语法和使用实例,需要的朋友可以参考一下。

css :hover伪类选择器介绍

css :hover选择器适用于设置光标(鼠标指针)指向一个元素,但此元素未被激活时的CSS样式,与css :hover类似的伪类选择器还有3个:

  1. :link 选择器设置了未访问过的页面链接样式,
  2. :visited 选择器设置访问过的页面链接的样式 
  3. :active选择器设置当你点击链接时的样式。

注意,a:hover 必须位于 a:link 和 a:visited 之后,a:active 必须位于 a:hover 之后, 可靠的顺序是:l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括.

语法:

:hover {
   style properties 
}

如:

a[href]:hover {text-decoration:  underline;}
p:hover {background: yellow;}

css :hover实例

设置鼠标移到链接上的样式:

<!DOCTYPE html>
<html>
<head>
<title>css :hover伪类选择器实例分析(http://www.manongjc.com/article/1323.html)</title>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head>

<body>
<a href="http://www.manongjc.com">manongjc</a>
<a href="http://www.wikipedia.org">wikipedia.org</a>

<p><b>Note:</b> The :hover selector style links on mouse-over.</p>

</body>
</html>

在线运行