您现在的位置是:首页 > 技术教程 正文

【前端 - CSS】第 16 课 - 伪类选择器(鼠标悬停状态)

admin 阅读: 2024-03-29
后台-插件-广告管理-内容页头部广告(手机)

        欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。


 

目录

1、缘起

2、伪类选择器

3、伪类 - 超链接(拓展)

4、总结


1、缘起

        在 CSS 中,我们使用 hover 表示 该元素在鼠标悬停状态下的样式


2、伪类选择器

        伪类依附于已存在的元素,使用冒号作为标识,描述元素在某特性或状态下的样式。工作中常用的伪类选择器如下:

选择器作用
:hover鼠标悬停状态
:active鼠标点击(按下不放)时激活
:focus获得焦点
:visited已访问的链接(a 标签)
:link未访问的链接(a 标签)
:checked勾选状态的表单标签
:first - child第一个子元素
:last - child最后一个子元素
:nth - child()指定索引的子元素

鼠标悬停状态 - 语法:选择器:hover { CSS 属性 }

① :hover 选择器示例代码:

  1. <style>
  2. /* 金黄色 */
  3. .box:hover{
  4. color: #ffd700; //妃色
  5. }
  6. /* 妃色 */
  7. a:hover{
  8. color:#ed5736; //金黄色
  9. }
  10. style>
  11. <body>
  12. <a href="#">这是一个链接a>
  13. <div class="box">这是一个 div 标签div>
  14. body>

①  当鼠标没有悬停在元素上时,其显示默认样式

②  当鼠标悬停在第一个元素时,其显示在代码中设置的妃色样式

③  当鼠标悬停在第二个元素时,其显示在代码中设置的金黄色样式

注:任何标签都可以设置鼠标悬停状态下的样式 

②  :nth - child(n) 选择器示例代码

  1. <style>
  2. li:nth-child(2)
  3. {
  4. color: red;
  5. }
  6. style>
  7. <body>
  8. <h3>喜欢做的事情h3>
  9. <ul>
  10. <li>li>
  11. <li>li>
  12. <li>rapli>
  13. <li>篮球li>
  14. ul>
  15. body>

注:nth-child(odd) 选中奇数行子元素,nth-child(even) 选中偶数行子元素。 


3、伪类 - 超链接(拓展)

超链接一共四个状态 

选择器作用
:link访问前
:visited访问后
:hover鼠标悬停
:active点击时(激活)

注:如果要给超链接设置以上四个状态,需要按 LVHA 的顺序书写。 

示例代码:

  1. <style>
  2. /* 妃色 */
  3. a:link{
  4. color:#ed5736;
  5. }
  6. a:visited{
  7. color:#ffd700;
  8. }
  9. a:hover{
  10. color:blueviolet;
  11. }
  12. a:active{
  13. color:#000000;
  14. }
  15. style>
  16. <body>
  17. <a href="https://www.baidu.com" target="_blank">点击跳转到百度a>
  18. body>

注:在实际工作当中,并不会都设置以上四个样式,按照需求设置合适的样式。 


4、总结

        本期的分享总结就到这里了,如果有疑问的小伙伴儿,我们在评论区交流嗷~~~,笔者必回,我们下期再见啦 !!!

博客中难免存在疏漏和错误之处,皆归因于作者水平有限,诚请各位读者不吝指正 !

< 前端 - CSS >  专栏系列持续更新 ,欢迎订阅关注 !

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索