今天在做导航栏的时候,需求里面需要实现一个小的动画效果,需求:导航栏中,鼠标移入每个链接,链接字体颜色发生改变,同时导航栏下面的小点圆圈移动到相对应的位置。因为需要兼容IE8的缘故,动画使用jQuery的animation函数来实现的。当完成导航栏的制作后,我突发奇想如果不需要用到任何JS是否可以实现该动画。
先看下测试中导航栏的代码
HTML
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
CSS
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
导航栏的初样
如何在不使用JS的条件下实现鼠标悬停,控制红色小点的运动。
CSS伪类:hover可以实现父元素控制子元素的样式变换。如果需要控制同胞元素的变换,该如何选择,这边就需要用到相邻兄弟选择器(+);
相邻兄弟选择器:如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
这句话是w3c的解释,意思是如果需要用到相邻兄弟选择器,那么需要满足它的条件:二者有相同的父元素。
如何理解相邻兄弟选择器(+)
以上面的测试Demo为例子,来解释下相邻兄弟选择器(+)。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
标签ul中的li标签拥有共同的父亲,它们是兄弟元素。相邻兄弟,第一个和第二个相邻,那么它们是相邻兄弟,第一个和第三个不相邻,那么它们不是相邻兄弟。CSS伪类:hover中,使用相邻兄弟选择器,可以控制相邻兄弟的样式变换。
例如:测试Demo
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
结果表示:CSS伪类:hover中,使用相邻兄弟选择器,可以控制相邻兄弟的样式变换。
那么如果倒过来用 f来控制d是否可行?结果是不可以的,大家可以自己尝试下。了解了相邻兄弟选择器(+)的作用,那么如何来实现控制不想邻的兄弟元素呢。下面用最开始导航栏的代码为例,来实现鼠标移入不同导航,而运动circle小球,通过实现这个效果后,想必应该对它会有跟进一步的理解。
如何实现小球随着鼠标悬停而运动
- 1
- 2
- 1
- 2
在样式表中添加上面的样式,即可实现小球随着鼠标悬停在不同的导航位置而运动。
Demo可以简写
- 1
- 2
- 1
- 2
通过简写可以发现,为了控制隔行的兄弟,必须先找到被控制元素的相邻兄弟元素,这样才能实现鼠标悬停的效果。
由于相邻兄弟选择器(+)的兼容性,实现鼠标悬停动画,还是采用JS的控制来实现为最佳,当然如果项目是属于移动端的,可以还不犹豫的使用相邻兄弟选择器(+),来实现一些动画的效果。毕竟老版本的浏览器迟早有一天会被淘汰的,大家在多尝试使用新的特性,个人一小步,促进前端的一大步。