:hove和:focus的区别

最新推荐文章于 2023-10-11 16:12:43 发布

顾智道

最新推荐文章于 2023-10-11 16:12:43 发布

阅读量2.7k

点赞数 1

分类专栏：知识文章标签： css

本文链接：https://blog.csdn.net/weixin_50564041/article/details/108703871

版权

一般来说:hover和:focus都是选择器。

:hover选择器用于选择鼠标指针浮动在上面的元素。选择器可用于所有元素，不只是链接；在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。：hover 是伪类，是鼠标滑过bai的动作
比如a:hover 意思是滑过a标签的时候的样式。只要你设置了。滑过就会有变化
例如：

<!DOCTYPE html>
<html>
<head>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head>
<body>

<a href="../">W3Sschool</a>
<a href="http://www.google.com/">Google</a>
<a href="http://www.wikipedia.org/">Wikipedia</a>

<p><b>注释：</b>:hover 选择器鼠标指针在其上浮动的链接设置样式。</p>

</body>
</html>

在这里插入图片描述

2.:focus也是选择获得焦点的输入字段，并设置其样式：例如：用户单击一个input输入框获取焦点，然后这个input输入框的边框样式就会发生改变，和其他的输入框区

最低0.47元/天解锁文章

顾智道

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
:hove和:focus的区别

一般来说:hover和:focus都是选择器。:hover选择器用于选择鼠标指针浮动在上面的元素。选择器可用于所有元素，不只是链接；在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。：hover 是伪类，是鼠标滑过bai的动作比如a:hover 意思是滑过a标签的时候的样式。只要你设置了。滑过就会有变化例如：<!DOCTYPE html><html><head><style>
复制链接

扫一扫