Question

基本上，我想在mouseenter上为li元素添加div，然后在同一父li的另一个ul元素的mouseenter上附加一个单独的div。因此，如果li悬停，请追加#div1，如果其他li悬停，请附加#div2。

这是我到目前为止所拥有的

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

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

这只会将#div1追加到悬停的li。如果另一个#div2悬停，我如何追加li？ .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然后如果另一个li被徘徊，我想将#div2附加到＃div1附加到的相同li上。

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

参考文献：

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

在mouseenter上添加div

2 个答案: