CSS :hover选择器

最近的工作内容是东家的一个在线网站，会用到大量CSS做页面的样式，刚好复习下CSS基础，在这里记录一下，希望也能帮助到前端er。

在实践中，对于页面动效，总体思路就是能用css解决的就绝不写js，这样不仅可以提高效率，还能提高网站性能（具体没有量化数字，但是减少dom操作总归是对网站有好处的）。

对于鼠标指针浮动在元素上面时，改变元素样式。这样的需求，不少人可能会想到js鼠标事件（mouseover/mouseout/mousemove等），但是毋庸置疑，CSS :hover选择器是最简单，代码量也是最少的。

当鼠标悬浮在指定元素target上时，:hover选择器可以实现：

1. 改变target元素样式
2. 改变target元素的子元素的样式
3. 改变target元素兄弟元素的样式

前两种用法比较常见，就不多说了。后面的用法直接下图为例说明，大家也可以自行实践：
符号"+"选中target元素后指定的元素的（紧邻）第一个元素

符号"~"选中target元素后所有指定元素

CSS :hover选择器配合一些CSS动效属性还可以做简单的动画，感兴趣者可以自行实践。