:hove和:focus的区别

最新推荐文章于 2025-05-08 23:11:50 发布

weixin_50564041

最新推荐文章于 2025-05-08 23:11:50 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

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

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

知识专栏收录该内容

13 篇文章

订阅专栏

本文探讨了CSS中的`:hover`和`:focus`选择器。`:hover`选择器用于当鼠标悬停在元素上时应用样式，适用于所有元素。而`:focus`选择器则在元素获得焦点，如输入框被点击后，改变其样式。为了页面一致性和浏览器兼容性，开发者常常需要自定义`:focus`状态的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般来说: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输入框的边框样式就会发生改变，和其他的输入框区别开来，表明已被选中。

一般情况下，浏览器都会自动在表单元素获取焦点时给元素周围添加轮廓，由浏览器添加的样式是每个浏览器的默认样式，并且通常情况下，每个浏览器之间的默认样式看起来是不一样。但为了页面的整体美观和浏览器的样式兼容性，往往我们都需要修改获得焦点时的元素样式，把默认样式替换为我们自己的样式。

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

<p>在文本框中点击，您会看到黄色的背景：</p>

<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form>

<p><b>注释：</b>如果 :focus 用于 IE8 ，则必须声明 <!DOCTYPE>。</p>

</body>
</html>

在这里插入图片描述
提示：接收键盘事件或其他用户输入的元素都允许 :focus 选择器。