0

基本的に、mouseenter の要素に div を追加してから、同じ親の別の要素のlimouseenter に別の div を追加します。したがって、 がホバーされている場合は append 、別のものがホバーされている場合は append .liulli#div1li#div2

これは私がこれまでに持っているものです 

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

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

これは#div1hovered にのみ追加されliます。#div2別のものがホバーされている場合に追加するにはどうすればよいliですか? .not()セレクターが機能していないようです。前もって感謝します。

4

2 に答える 2

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にカーソルを合わせると、＃div1が追加されたのと同じliに＃div2を追加したいと思います。

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

参照：

于 2012-05-28T00:41:07.993 に答える
0

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(); //
});
于 2012-05-28T03:30:46.637 に答える