html的hover伪类如何操纵自己包含的子元素以外的元素？
RT被操作的元素可能是同级的，比如我要在鼠标经过【<divclass="123">123</div>】时改变【<divclass="abc">abc</div>】这个元素...
RT
被操作的元素可能是同级的，比如我要在鼠标经过【<div class="123">123</div>】时
改变【<div class="abc">abc</div>】这个元素，该怎么写呢？
<div class="123">123</div>
<div class="abc">abc</div>
还有一种情况，被操作的元素是父级元素，比如我要在鼠标经过<div class="abc">abc</div>
时改变body的样式，该怎么写呢？
<body>
<div class="123">
<div class="abc">abc</div>
</div>
</body>
我试过一些方法，比如
.123:hover .abc{
【css代码】
}
这种方法貌似不行。
请路过的高手帮忙解答一下这个小问题，在下感激不尽！ 展开
被操作的元素可能是同级的，比如我要在鼠标经过【<div class="123">123</div>】时
改变【<div class="abc">abc</div>】这个元素，该怎么写呢？
<div class="123">123</div>
<div class="abc">abc</div>
还有一种情况，被操作的元素是父级元素，比如我要在鼠标经过<div class="abc">abc</div>
时改变body的样式，该怎么写呢？
<body>
<div class="123">
<div class="abc">abc</div>
</div>
</body>
我试过一些方法，比如
.123:hover .abc{
【css代码】
}
这种方法貌似不行。
请路过的高手帮忙解答一下这个小问题，在下感激不尽！ 展开
2个回答
展开全部
楼主，这是通过>与+来控制下个元素，子集元素，下个元素的子集元素的CSS
<html>
<body>
<style>
#a {color : #FFFF00;}
#a:hover > #b{color : #FF0000;}
#a:hover + #c{color : #00FF00;}
#a:hover + #c > #b{color : #0000FF;}
</style>
<div id='a'>元素1
<div id='b'>元素2</div>
</div>
<div id='c'>元素3
<div id='b'>元素2</div>
</div>
</body>
</html>
下面是补充
楼主，我又通过CSS选择器研究了一些，你可以参考着按照自己的需求改
<html>
<body>
<style>
#a:hover {color : #FFFF00;}
#a:hover > #b:first-child{color : #FF0000;}
#a:hover > #b{color : #FF00FF;}
#a:hover + #c{color : #00FF00;}
#a:hover + #c > #b{color : #0000FF;}
</style>
<div id='a'>元素1
<div id='b'>元素2</div>
<div id='b'>元素2</div>
</div>
<div id='c'>元素3
<div id='b'>元素2</div>
</div>
</body>
</html>
追问
那如果想控制之前的元素，比如body（这个肯定在hover元素之前的），如何修改他的样式呢？
还望大侠不要吝啬赐教，在下在线等！！好的我再追加分数，谢谢~
如果大侠有时间，也可加Q【防和谐】Q解答：1022 【防和谐】74768
追答
楼主，目前CSS3之前的版本是不具备父级选择的，CSS4更新以后会出父级选择器。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
