0

私のページには特定のアイテムがあります。誰かがアイテムをホバーすると、そのアイテムの上にオーバーレイ div が必要です。なしで関数を使用している場合、これは機能します$(this)が、すべてのアイテムをオーバーレイしています。その時点でホバリングしているアイテムのみをオーバーレイしたいと思います。

私のコード:

jQuery:

<script>
  $(document).on("mouseenter", ".item" , function() {
    $(this).('.item-overlay').stop().fadeTo(250, 1);
  });
  $(document).on("mouseleave", ".item" , function() {
    $(this).('.item-overlay').stop().fadeTo(250, 0);
  });
</script>

HTML:

<div class="item">
  <a href="#"><img src="<?=$row['item_pic']?>" class="item-img"></a>
  <div class="item-overlay" style="background:#999; display: none; position:absolute; top:0px; left: 0px; width:400px; height:200px; z-index:900;">test</div>
</div>
4

3 に答える 3

1

これ：

$(this).('.item-overlay')

は無効であり、おそらく次のようになります。

$(this).find('.item-overlay')

合計で：

<script type="text/javascript">
$(function() {
    $(document).on({
        mouseenter: function() {
            $(this).find('.item-overlay').stop().fadeTo(250, 1);
        },    
        mouseleave: function() {
            $(this).find('.item-overlay').stop().fadeTo(250, 0);
        }
    }, '.item');
});
</script>

楽しみのために、ここに短いバージョンがあります：

$(function() {
  $(this).on('mouseenter mouseleave', '.item', function(e) {
    $(this).find('.item-overlay')[e.type=='mouseenter'?'fadeIn':'fadeOut'](250);
  });
});
于 2013-02-14T16:50:44.577 に答える
0 
 $(function() {
$(document).on("mouseenter", ".item" , function() {
    $(this).children('.item-overlay').stop().fadeTo(250, 1);
});

$(document).on("mouseleave", ".item" , function() {
    $(this).children('.item-overlay').stop().fadeTo(250, 0);
});

});

必要な「子供」

于 2013-02-14T16:53:59.973 に答える
0

このスクリプトを試してください:

$(document).on("mouseenter", ".item" , function() {
    $('.item-overlay').stop().fadeTo(250, 1);
});

$(document).on("mouseleave", ".item" , function() {
    $('.item-overlay').stop().fadeTo(250, 0);
});

$(this) を削除しました

それが役に立ったことを願っています

于 2013-02-14T16:55:14.917 に答える