Question

http://s199881165.onlinehome.us/transfem/newlayout/indexlisttrypopupquestion.php

以上是我正在处理的页面。您会发现，如果您将鼠标悬停在时间轴中的图块上，则会弹出一堆放在每个图块下方的div。

但是我希望每个瓷砖只显示一个相应的div。

 $('#sortable1 li').mouseenter(function()
    {

          $( '.infofloat').show( "scale", 300 );


      });

      $('#sortable1 li').mouseleave(function()
    {
          $( '.infofloat').hide( "scale", 300 );
    });

和html

<div class="timelinehouse_div" id="theone<? echo $nummy;?>"><div class="thumbnail" style="background-image: url(<? echo $piccy;?>);"></div>
 <div class="meta"><div class='coverup'></div><? echo $tittie; ?></div></div>
  <div class="infofloat"><div class='arrowtop'></div></div>
</li>

Answer 1

使用上下文，您只能定位列表项中的.infofloat：

$('#sortable1 li').on({
    mouseenter: function() {
          $( '.infofloat', this).show( "scale", 300 );
    },
    mouseleave: function() {
          $( '.infofloat', this).hide( "scale", 300 );
    }
});

只是为了好玩，更短的版本是：

$('#sortable1 li').on('mouseenter mouseleave', function(e) {
    $( '.infofloat', this)[e.type=='mouseenter'?'show':'hide']( "scale", 300 );
});

Answer 2

您需要使用$(this)定位当前li并使用find()获取相应的.infofloat子div

$('#sortable1 li').mouseenter(function() {
    $(this).find( '.infofloat').show( "scale", 300 );
});

$('#sortable1 li').mouseleave(function() {
    $(this).find( '.infofloat').hide( "scale", 300 );
});

Answer 3

您可以使用find()方法：

$(this).find('.infofloat').show( "scale", 300 );

识别里面的div（this）以用jquery显示

3 个答案: