CSS hover 的用法详解及示例

我实在是太菜了，一个前端，连这个都不会，还需要查？

CSS :: child set to change color on parent hover, but changes also when hovered itself

需求

鼠标移到父 div 的时候，子 div 显示，鼠标移出父 div 的时候，子 div 隐藏。

实现

.parent {
  padding: 50px;
  border: 1px solid black;
}

.parent span {
  position: absolute;
  top: 200px;
  padding: 30px;
  border: 10px solid green;
}

.parent:hover span {
  border: 10px solid red;
}

.parent span:hover {
  border: 10px solid green;
}

<a class="parent">
  Parent text
  <span>Child text</span>
</a>

自嘲

一个快 3 年的前端，连着都没玩过，还要查资料确认，乐色 乐色 真的乐色 too low