Part.1 问题
我们写页面时也不少遇到这个问题,在没有使用任何预处理语言前提下,当 hover 一个元素的时候怎么改变其它的元素?
这里我把它分为两种情况(除自身以外)
hover 时
1: 改变本身的子元素
2: 改变本身元素的兄弟元素
Part.2 解决
第一种情况最常见也相对好解决:
现在我们假设 class1 为父级元素, class2 为它的子级元素
HTML
<div class="class1"><div class="class2"></div></div>
CSS
.class1 {width: 300px;height: 300px;margin: 200px auto;border: 1px solid red}.class2 {width: 150px;height: 150px;float: right;border: 1px solid black}.class1:hover .class2{background: yellow}
效果:
第二种情况不是很常见:
现在我们假设 class1丶class2 为兄弟元素,这里会用到 CSS3 的兄弟选择器
HTML
<div class="class1"></div><div class="class2"></div>
CSS
.class1 {width: 300px;height: 300px;margin: 200px auto 0;border: 1px solid red}.class2 {width: 150px;height: 150px;margin: auto;border: 1px solid black}.class1:hover + .class2{background: yellow}
效果: