CSS hover 时显示其它元素

React中经常会用到一个功能，就是鼠标悬停在某一元素上时显示另外一个元素，或子元素、或兄弟元素。

React可以使用state的值控制是否显示，另外还可以使用CSS选择器实现。

有如下两个div:

<div class="cls1">div1</div>
<div class="cls2">div2</div>

对应的CSS为:

.cls2 {
  display: none; // div2 默认不显示
}

.cls1:hover+.cls2 {
  display: inline-block;
}

亲自试一试: https://codepen.io/Witee/pen/JzOpmj

关键就是第二行的选择器配置，鼠标放在div1上时，就是显示兄弟元素中class为cls2的元素。
另外兄弟选择器(+)还可以换成子元素选择器(>)，这样就可以显示div1下的元素了。