0

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

3 回答 3

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 );
});
于 2013-05-03T18:10:56.293 回答
1

您需要使用$(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 );
});
于 2013-05-03T18:13:45.307 回答
0

您可以使用以下find()方法：

$(this).find('.infofloat').show( "scale", 300 );
于 2013-05-03T18:13:17.190 回答