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();
});

此处提供输出

非常感谢

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>

Answer 2

我不知道

这是否是你需要的。但我在这里猜测。更改 CSS 中的最后一行：

.test111 li a{background:#0ff; width:50px; float:right; height: 100%;}

Answer 3

只需将 test111 的 css 位置属性更改为相对属性即可。它应该解决问题

Answer 4

这是一个使用 CSS opacity 和 jQuery .animate() 的平滑变体。

$(document).ready(function(){
  //$('.testCont').hide();
  $('.test111 li').mouseover(function(){
    $('.test111 li').removeClass('hoverME');
    $(this).addClass('hoverME');
    $('.hoverME .testCont').stop().animate({"opacity":1},600);
  });
  $('.test111 li').mouseout(function(){
    $('.testCont').stop().animate({"opacity":0},600);;
  });
});

.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%;
}
.testCont{
  opacity:0;
}

<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>
  <li><span class="testCont">Another1</span><a href="#" class="testmenu">Menu 3</a></li>
</ul>