在鼠標中心上添加div

Question

基本上，我想在mouseenter上附加一個div到li元素，然後在同一父母ul的另一個li元素的mouseenter上附加一個單獨的div。所以如果一個li被徘徊，追加#div1，那麼如果另一個li被徘徊，追加#div2。

這是我迄今爲止

$('ul > li').mouseenter(function(){ 
     $('#div1').appendTo(this); 

     if (('ul > li').mouseenter().not(this)){ 
     $('#div2')appendTo(this); 
     } 
}); 

這僅追加#div1到徘徊li。如果另一個li懸空，我如何追加#div2？ .not()選擇器似乎沒有工作。提前致謝。

Answer 1

我建議如下：

$('li').mouseenter(
    function(){ 
     var that = $(this), 
      i = that.index(); 
     if (i == 0){ 
      $('#div1').appendTo(that); 
     } 
     else { 
      $('#div2').appendTo(that); 
     } 
    }); 

以上是基於要附#div1到第一li的假設，並#div2所有其他li元素。

---

編輯響應從OP評論（左下圖）：

其實我是想追加上了mouseenter＃DIV1那麼當另一個李盤旋，我想追加＃ div2與＃div1追加到的相同的li。

$('li').mouseenter(
    function(){ 
     var that = $(this), 
      i = that.index(); 
     if (i == 0){ 
      $('#div1').appendTo(that); 
     } 
     else { 
      $('#div2').appendTo($('#div1').closest('li')); 
     } 
    }) 

參考文獻：

• appendTo()。
• closest()。
• index()。

Answer 2

或者，您可以將li元素中的div放入display:none，並將它們顯示在鼠標懸停上。你可以淡入/等

CSS

li div {display:none} 

HTML

<ul> 
<li>Whatever <div>the div </div></li> 
<li>Whatever 2<div>the div 2</div></li> 
<li>Whatever 3<div>the div 3</div></li> 
</ul> 

JS

$('li').mouseenter(
function(){ 
    $('div', this).show(); // 
});