css中hover伪类怎么用?

在CSS中有个hover属性,当鼠标移上去的时候可以将其激活,它可以用来实现类似于js的一些功能。接下来在文章中将为大家具体介绍hover属性如何使用,希望对大家有所帮助。

css中hover伪类怎么用?

:hover 选择器用于选择鼠标指针浮动在上面的元素。

提示:

  • :hover 选择器可用于所有元素,不只是链接。

  • :link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:active 选择器用于活动链接。

  • 在 CSS 定义中,:hover必须位于:link 和:visited 之后(如果存在的话),这样样式才能生效。

注意:在 IE 中必须声明 <!DOCTYPE> 才能保证:hover选择器能够有效。

hover的用法

示例1:鼠标悬浮在元素上改变元素样式

例:当鼠标悬浮在字体上,字体颜色发生改变

h1:hover{
  color: pink;
}
<h1>HTML中文网</h1>

效果图:

1.gif

这个是最普通的用法了,只是改变了style样式

示例2:

#app{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    background: skyblue;
    transition: all 1s;
}
#app:hover{
    width: 200px;
    height: 200px;
}

效果图:

2.gif

更多web前端知识,请查阅 HTML中文网 !!

以上就是css中hover伪类怎么用?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏