javascript - jQuery addClass 和 removeClass 事件对悬停功能有奇怪的影响

Question

我正在尝试创建一个菜单列表，当您将鼠标悬停在每个菜单上时，它会显示其他内容。它现在可以正常工作，但每次您将鼠标悬停在每个项目上时，它都会在另一个列表项目上创建一个空间。

这是示例代码。

<ul class="test111">
    <li><span class="testCont">Another</span><a href="#" class="testmenu">Menu 1</a></li>
    <li><span class="testCont">Another1</span><a href="#" class="testmenu">Menu 2</a></li>
</ul>

CSS

.test111{
    position: fixed;
    right:0;
    margin-right:0;
}
.test111 li{
    margin-bottom: 10px;
    list-style: none;
    height:36px;
    display: block;
}
.test111 li .testCont{
    background:#0f0;
    width:100px;
    float:left;
    height: 100%;
}
.test111 li a{
    background:#0ff;
    width:50px;
    float:left;
    height: 100%;
}

JS

$('.testCont').hide();

$('.test111 li').mouseover(function(){

    $('.test111 li').removeClass('hoverME');
    $(this).addClass('hoverME');
    $('.hoverME .testCont').show();

});
$('.test111 li').mouseout(function(){
    $('.testCont').hide();
});

SAmple output here

非常感谢

Answer 1

只需将 float:right; 添加到 .test111 li a

$('.testCont').hide();

$('.test111 li').mouseover(function(){

    $('.test111 li').removeClass('hoverME');
    $(this).addClass('hoverME');
    $('.hoverME .testCont').show();

});
$('.test111 li').mouseout(function(){
    $('.testCont').hide();
});

.test111{position: fixed; right:0; margin-right:0;}
.test111 li{margin-bottom: 10px; list-style: none; height:36px; display: block;}
.test111 li .testCont{background:#0f0; width:100px; float:left; height: 100%;}
.test111 li a{background:#0ff; width:50px; float:left; height: 100%;float:right;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="test111">
    <li><span class="testCont">Another</span><a href="#" class="testmenu">Menu 1</a></li>
    <li><span class="testCont">Another1</span><a href="#" class="testmenu">Menu 2</a></li>
</ul>