CSS :hover选择器,匹配鼠标指针悬停元素
:hover选择器
CSS伪类选择器:hover可用于匹配获取鼠标指针悬停在上方的HTML元素,常用于链接的样式设置,比如鼠标指针悬停在链接上,链接上的文字颜色就改变,以增加网页设计的设计感、动态性、互动性等。但不仅仅是链接可以设置:hover的样式,其它的HTML元素。
:hover选择器实例代码,及在线编辑器
链接的:hover设置:
<a href='https://www.x1y1z1.com' target='_blank' class='e1'>笨鸟工具</a>
<style>
.e1:hover{color:blue;font-size:2em;}
</style>
实例代码解析
如上代码,因为本站的CSS文件已经对链接的样式进行了设置,所以上例“在线”运行之后,链接的颜色不是默认的蓝色,但这并不妨碍:hover功能的使用,上例中,将a链接的鼠标指针悬停的样式设置成了蓝色,字体大小为2em。
:hover选择器应用在其它的HTML元素中的实例代码
下方的实例将设置div的:hover样式,即鼠标指针悬停时的背景色的样式变化:
<div class='e2'><p>笨鸟工具</p></div>
<style>
.e2:hover{background-color:skyblue;}
</style>