Question

用JQ控制3个class一样的div鼠标移上去触发mouseover事件其它两个没有触发

<ul class="login_ul">
<li>
<div class="handle">
<a href="#">上传</a>
</div>
<div class="handle_box handle3_right"><span>上传</span></div>
</li>
<li>
<div class="handle">
<a href="#">记录</a>
</div>
<div class="handle_box handle2_left"><span>记录</span></div>
</li>
<li>
<div class="handle">
<a id="btn" href="javascript:void(0);">登录</a>
<span>|</span>
<a href="#">注册</a>
</div>
<div class="handle_box handle1_left"><span>登录</span></div>
</li>
</ul>
没触发mouseover事件时handle_box都是display:none的，handle也没有hover状态
我想用JQ在我鼠标移到handle上时handle_box变为block,handle加上一些样式，我想的是
.login_ul .active .handle{border-left: 1px solid #000;border-right: 1px solid #000;background-color: #fff;border-bottom: 2px solid #fff;}触发时给当前的li加个class="active"，JQ的话要怎么写？
$(".handle").mouseover(function(){
$(".handle").parents("li").addClass("active");
});
$(".handle").mouseout(function(){
$(".handle").parents("li").removeClass("active");
});
这样3个会一起触发 而且还要handle_box为block时我鼠标可以在上面移动，
其实就是优酷右上角登录的效果，我仿着练习 做到这步不会了。。。希望大神指点迷津一下~
第一个是用JQ写成那样了。。 第二个是CSS单独改的想做成移到哪个上哪个显示





Answer 1

$(".handle").mouseover(function(){
        $(".handle").parents("li").removeClass("active");//移除所有.handle的active类
        $(this).parents("li").addClass("active");//再将滑倒的这个添加上active类
        $(".handle").parents("li").find(".handle_box").hide();//先隐藏所有.handel_box
        $(this).parents("li").find(".handle_box").show();//再将滑倒的这个的.handle_box显示
    });
    
    或者这样
    $(".handle").mouseover(function(){
        $("ul .active").find(".handle_box").hide();//先隐藏已经显示的li里的.handel_box
        $(this).parents("li").find(".handle_box").show();//再将滑倒的这个的.handle_box显示
        //切记以上要在移除类之前写  不能写在后边
        $("ul .active").removeClass("active");//移除已经显示的li的active类
        $(this).parents("li").addClass("active");//再将滑倒的这个添加上active类
    });