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

即可

＆＃13;

＆＃13;

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

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

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

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

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我不知道这是否是你所需要的。但我猜这里。更改CSS中的最后一行：

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

Answer 3

将float:left;替换为CSS选择器float:right;中的test111 li a。

＆＃13;

＆＃13;

$(document).ready(function(){
  $('.testCont').hide();
  $('.test111 li').mouseover(function(){
    $('.test111 li').removeClass('hoverME');
    $(this).addClass('hoverME');
    $('.hoverME .testCont').show();		
  });

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

＆＃13;

.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:right; height: 100%;}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

只需将test111的css position属性更改为relative。 它应该解决问题

Answer 5

这是一个使用CSS DF <- structure(list(ID = structure(c(9L, 9L, 9L, 9L, 9L, 9L, 9L, 9L, 9L, 9L, 9L, 9L, 9L), .Label = c("B1", "B2", "B3", "S1", "S2", "TCB995", "THB379", "THB380", "THB381", "THB382", "THB383", "THB384", "THB385", "THB386", "THB387", "THB388", "TPB166", "TPN270", "WSTD" ), class = "factor"), POS = c(40L, 40L, 40L, 40L, 40L, 40L, 40L, 40L, 40L, 40L, 40L, 40L, 40L), CYC = 2:14, COUNTS2 = c(206L, 212L, 204L, 186L, 177L, 195L, 189L, 195L, 184L, 209L, 194L, 197L, 194L), CTIME_mins = c(100.02965, 100.02965, 100.02955, 100.02965, 100.02965, 100.02965, 100.012983333333, 100.02965, 100.02965, 100.02955, 100.02965, 100.02965, 100.02965)), .Names = c("ID", "POS", "CYC", "COUNTS2", "CTIME_mins"), row.names = 256:268, class = "data.frame") 和jQuery .animate()的平滑变体。

＆＃13;

＆＃13;

opacity

＆＃13;

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

});

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;