:hover 实际选择的是子元素的原因

jiang_mingyi

于 2017-10-24 17:52:15 发布

阅读量2.1k

点赞数 7

分类专栏：前端开发日记

本文链接：https://blog.youkuaiyun.com/jiang_mingyi/article/details/78332444

版权

29 篇文章

订阅专栏

本文详细介绍了 CSS 中 :hover 选择器的两种使用方式及其区别：一种用于选择带有悬停状态的元素本身，另一种则针对该元素的所有子元素。通过实例说明了这两种用法如何改变元素的背景颜色。

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

先看下面代码的区别

.myDiv :hover{//:hover前有空格
    background: blue;
  }
  .myDiv:hover{//:hover前没有空格
    background: blue;
  }

第一种:hover选择的是.myDiv的所有子元素，而第二种选择的是.myDiv本身。
第一种会将.myDiv的所有子元素的背景设为blue；
第二种会将.myDiv自己的背景设为blue。