hover的作用范围

html代码：

<div class="main">
  <div class="first"></div>
  <div class="second"></div>
</div>

css代码：

.main {
  width: 200px;
  height: 100px;
}

.first {
  width: 200px;
  background-color: aquamarine;
  height: 100px;
}

.second {
  width: 200px;
  background-color: red;
  height: 100px;
}

.main:hover .first {
  background-color: blue;
}

1.当鼠标没有hover时：

2.当鼠标放在青色区域时：

3.当鼠标放在红色区域时：

总结：
1.即使鼠标没有放在父元素的内容区内，而是放在了父元素的子元素的内容区内，也会使得父元素的hover生效。
2.后面经过测试发现，鼠标放在padding和border都会生效，但是在border不生效。

这个效果可以用在导航栏的二级菜单中，即使鼠标放在了二级菜单中，在导航栏中也会有hover的效果。