Question

有两个div一个是#a,一个是#b，能通过#a:hover来改变#b的样式吗？？如果能怎么写？？

要纯css(1-3都行随便，不要js ,jquery)..我发现 如果 #a 如果存在#a:after 或者a:before 可通过 #a:hover:after{} /#a:hover:before{}来修改 before和after的样式，我简单尝试了一下修改 其他元素的样式，但是可能我写错了，写不出来，如果有的话 求告知

Answer 1

这种不通过JS脚本，仅通过CSS实现有两种方法：

1、如果你#b元素是#a元素的子元素，可以直接通过 #a #b {...}这种方式定义CSS样式来控制

2、#a与#b是亲兄弟关系，有相同的父节点，且#b跟#a紧临，可以通过 #a + #b{..}来控制#b里面的元素样式；

下面给出第二种方式的示例：

<style>
	#a {color : #99ff66;}
	#a + #b{color : #FF0000;}
</style>

HTML元素：

<div id='a'>元素1</div>
<div id='b'>元素2</div>
<div id='c'>元素3</div>

如果上面的b与c调换位置则对应的CSS设置将不生效。

追问

回到很详细。。不过好像 没说到 是：hover来改变哟 。

追答

你把CSS样式改下就OK了，在#a后面加上:hover

<style>
    #a {color : #99ff66;}
    #a:hover + #b{color : #FF0000;}
</style>

 这就表示当鼠标移到#a上时，#b样式发生变化

Answer 2

我也遇到了这个问题，尝试了答案的，但是不好使。

后来试用'>'发现可以了.（我用的sublime text3,   html5）

.a:hover>.b
{
    background-color:#000;
}

就是鼠标放到a上时，b的背景色改为黑色。

Answer 3

还真是加个+号就好了，我记得行内元素什么都不加的，用在div上就是显示不出来

Answer 4

我只见过这种情况能改的,就是b是a 的子层或子元素。其它情况没见过。请高手指点。

Answer 5

子级父级的话还可以，像这种兄弟姐妹级的还真没试过~