鼠标悬停div改变另一个div样式，怎么写？两个div是分开的【如图】
3个回答
展开全部
当鼠标放到div上，获取另一个div的class改变样式就行了，js和css都可以实现，很简答的，比如第一个div class叫h，要改变叫d，那么久是
css:
.h:hover .d{background:#ff6a00;}
jq:
$(".h").hover(function () {
$(".d").css("background", "#ff6a00");
});
css:
.h:hover .d{background:#ff6a00;}
jq:
$(".h").hover(function () {
$(".d").css("background", "#ff6a00");
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width:200px;height:200px;background-color: red;
}
.div2{
width:200px;height:200px;background-color: blue;
}
.div1:hover +.div2{background:#000;}
</style>
</head>
<body>
<div></div>
<div></div>
<h2>鼠标移动到div1上div2会改变样式</h2>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width:200px;height:200px;background-color: red;
}
.div2{
width:200px;height:200px;background-color: blue;
}
.div1:hover +.div2{background:#000;}
</style>
</head>
<body>
<div></div>
<div></div>
<h2>鼠标移动到div1上div2会改变样式</h2>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个需要用javascript才能实现：
<div id="div1"></div>
<div id="div2"></div>
<style>
.add{ .....}
</style>
<script>
$("#div1").hover(function(){
$("div2").addClass('add');
},function(){
$("div2").removeClass('add');
})
</script>
这是js的jquery来实现的
<div id="div1"></div>
<div id="div2"></div>
<style>
.add{ .....}
</style>
<script>
$("#div1").hover(function(){
$("div2").addClass('add');
},function(){
$("div2").removeClass('add');
})
</script>
这是js的jquery来实现的
追问
下面那个黑条和图片变属性都是那个div hover写的，黑条之前是隐藏的，怎么让悬停上面的改变下面样式呢
追答
原理都是我上面用jQuery写的，jquery的hover事件，当鼠标在当前元素上时，给其它元素加CSS，离开的就取消
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
