最近的工作内容是东家的一个在线网站,会用到大量CSS做页面的样式,刚好复习下CSS基础,在这里记录一下,希望也能帮助到前端er。
在实践中,对于页面动效,总体思路就是能用css解决的就绝不写js,这样不仅可以提高效率,还能提高网站性能(具体没有量化数字,但是减少dom操作总归是对网站有好处的)。
对于鼠标指针浮动在元素上面时,改变元素样式。这样的需求,不少人可能会想到js鼠标事件(mouseover/mouseout/mousemove等),但是毋庸置疑,CSS :hover选择器是最简单,代码量也是最少的。
当鼠标悬浮在指定元素target上时,:hover选择器可以实现:
- 改变target元素样式
- 改变target元素的子元素的样式
- 改变target元素兄弟元素的样式
前两种用法比较常见,就不多说了。后面的用法直接下图为例说明,大家也可以自行实践:
符号"+"选中target元素后指定的元素的(紧邻)第一个元素
符号"~"选中target元素后所有指定元素
CSS :hover选择器配合一些CSS动效属性还可以做简单的动画,感兴趣者可以自行实践。