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>

全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.