:hover和:focus的用法区别

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

逃げるは恥だが役に立つ

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

阅读量1.4k

点赞数 2

文章标签： css 前端 html Powered by 金山文档

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

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

<!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>