:hover和:focus的用法区别

一般来说: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 选择器。

————————————————

版权声明:本文为CSDN博主「顾智道」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

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

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值