请问如何实现鼠标移到li上改变另一个div的样式
<body>
<div id=wrap>
<div class=map>
<div class=A0>
<ul>
<li class=B1><a href=#>嘟嘟噜</a></li>
<li class=B2>...............................................</li>
</ul>
</div>
<div class=A1><a href=#>阿卡琳</a></div>
<div class=A2>..............................................</div>
</div>
</body>
备注：B1和A1本身有css的link，visited和hover样式。可能会有优先级的问题
请问鼠标移过“嘟嘟噜”的时候改变“阿卡琳”的样式该如何实现
追加提问：因为A1和B1是一一对应的。如果能有一个函数直接让Bx影响Ax这种最好了
谢谢大神
qq_见过雪_0浏览 9847回答 7
7回答
-
闹小志
这类问题我知道的有两种办法：1、根据索引，比如你点击了第几个li，第几个div样式就要变化这样。这个方法有缺陷，就是你的位置必须是一一对应的，顺序不能乱，相比下，第二种办法就更灵活了。2、就是设置一个关联的东西，把他们联系在一起。比如你的li是同级的，你就给class设置成了A某（例A1，A2，A3...），div是受控制的一方，你就给class设置成了B某（例B1，B2，B3...），然后给每个li都设置一个data-flag。比如：<li class="B1" data-flag="1"><a href=#>嘟嘟噜</a></li> <li class="B2" data-flag="2">...............................................</li>然后点击哪个li，你就获取到当前的li的data-flag值和A拼上个字符串，用jquery表示就是：$("li").click(function(){ $(".A"+$(this).data("flag")).css(你要改变的样式属性); });总结：问题不是你是不是必须设置成某1 某2 某3这种形式 你也可以设置成如下形式：<div class=A0> <ul> <li class=“B1” data-r="a"><a href=#>嘟嘟噜</a></li> <li class=“B2” data-r="b">...............................................</li> </ul> </div> <div class=“menu-a”><a href=#>阿卡琳</a></div> <div class=“menu-b”>..............................................</div>$("li").click(function(){ $(".menu-"+$(this). ("r")).css(你要改变的样式属性); });总之，思想了解了，怎么写就是你自己的事儿了，反正是有这么个办法，我一般都是这样用~ -
weibo_哆啦A梦有大口袋_0
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>测试</title><script type="text/javascript" src="jquery-1.7.1.min.js"></script><style type="text/css">li{list-style: none;}a{text-decoration: none;color: #000;}.B li.cursor{background: red;}</style></head><body><ul><li><a href="JavaScript:;">嘟嘟噜</a></li><li><a href="JavaScript:;">哈哈哈</a></li></ul><ul><li><a href="JavaScript:;">阿卡林</a></li><li><a href="JavaScript:;">末日使者</a></li></ul></body><script type="text/javascript">$(function(){$(".A li").mouseenter(function(){var index=$(this).index();$(".B li").eq(index).addClass('cursor').siblings().removeClass("cursor");})$(".A li").mouseleave(function(){$(".B li").removeClass('cursor');})})</script></html> -
潭风灬
可以将Ax对应的div放在Bx的li里面，再设置样式 -
weibo_哆啦A梦有大口袋_0
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>测试</title><script type="text/javascript" src="jquery-1.7.1.min.js"></script> <style type="text/css"> li{list-style: none;} a{text-decoration: none;color: #000;} .B li.cursor{background: red;} .A li{float: left;height: 30px;margin: 0 10px;} .B li{float: left;height: 30px;margin: 0 10px;} </style></head><body><ul class="A"> <li><a href="JavaScript:;">嘟嘟噜</a></li> <li><a href="JavaScript:;">哈哈哈</a></li> <li><a href="JavaScript:;">移入3</a></li> <li><a href="JavaScript:;">移入4</a></li> <div style="clear:both;"></div></ul><ul class="B"> <li><a href="JavaScript:;">阿卡林</a></li> <li><a href="JavaScript:;">末日使者</a></li> <li><a href="JavaScript:;">变化3</a></li> <li><a href="JavaScript:;">变化4</a></li> <div style="clear:both;"></div></ul></body><script type="text/javascript">$(function(){ $(".A li").mouseenter(function(){ var index=$(this).index(); $(".B li").eq(index).addClass('cursor').siblings().removeClass("cursor"); }) $(".A li").mouseleave(function(){ $(".B li").removeClass('cursor'); })})</script></html> -
weibo_哆啦A梦有大口袋_0
不懂问我
随时随地看视频慕课网APP
CSS3
Html/CSS
JQuery