相邻兄弟选择器(+)
来源:互联网 发布:北京航空学院网络教育 编辑:程序博客网 时间:2024/05/03 00:41
今天在做导航栏的时候,需求里面需要实现一个小的动画效果,需求:导航栏中,鼠标移入每个链接,链接字体颜色发生改变,同时导航栏下面的小点圆圈移动到相对应的位置。因为需要兼容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的控制来实现为最佳,当然如果项目是属于移动端的,可以还不犹豫的使用相邻兄弟选择器(+),来实现一些动画的效果。毕竟老版本的浏览器迟早有一天会被淘汰的,大家在多尝试使用新的特性,个人一小步,促进前端的一大步。
- 相邻兄弟选择器(+)
- 相邻兄弟选择器(+)
- 相邻选择器、兄弟选择器
- CSS 相邻兄弟选择器
- CSS 相邻兄弟选择器
- CSS 相邻兄弟选择器
- 选择器之相邻兄弟选择器
- CSS相邻兄弟选择器和普通相邻兄弟选择器
- css_day02_各种选择器基本使用(相邻兄弟选择器+,兄弟选择器~)
- css中相邻兄弟选择器
- css相邻兄弟元素选择器
- 后代、子元素、相邻兄弟选择器
- CSS后代选择器、子元素选择器、相邻兄弟选择器
- css 派生选择器+子选择器+相邻兄弟选择器
- 兄弟选择器和相邻选择器按正序控制兄弟元素和相邻元素的样式
- [jQuery] 2.2层级选择器(包含选择器,子选择器,相邻选择器,兄弟选择器)
- CSS选择器:属性选择器+后代选择器+子元素选择器+相邻兄弟选择器+伪类+伪元素
- 多类、属性、后代、子元素、相邻兄弟选择器
- 山大场馆管理系统 开发日志1
- 2. FFmpeg 编译 for Android
- python实例1--获取序列名称和序列
- C++ 构造函数总结
- 动态界面:DSL&布局引擎
- 相邻兄弟选择器(+)
- C#RSA非对称加密算法/数字签名算法
- ECG曲率计算,曲线拟合(还没写完)
- dedecms列表页调用多张图片
- Js下Image.src的坑
- 略过 Mysql 5.7的密码策略
- 学习云计算从哪里入手?
- 策略模式【Strategy Pattern】
- Java Jxl Excel 操作总结3(常用格式+自动调整列宽)