0

各関数を使用して一度に1つの要素のみを表示しようとしていますが、最初のアイテムに関連付けられた一致するアイテムを取得する方法がわからないため、最初の「hoverMe」にカーソルを合わせると、最初のshowMeのみが表示されます.

ここに私がこれまでに持っているものがあります。これは本当に面倒な方法で行うことができると思いますが、それを行うためのきれいな方法があるかどうかはわかりません.

http://jsfiddle.net/Pm2vP/

<p class="hoverMe">Hover me<span class="showMe">show me</span></p>
<p class="hoverMe">Hover me<span class="showMe">show me</span></p>
<p class="hoverMe">Hover me<span class="showMe">show me</span></p>

$('.showMe').hide();

$(".hoverMe").each(function(){
  $(this).hover(
    function () {
      $(".showMe").fadeIn();
    },
    function () {
      $(".showMe").fadeOut();
    }
  );
});
4

4 に答える 4

0 
$('.showMe').hide();
$(".hoverMe").mouseover(function(){
$('.showMe').fadeOut();
$(this).find(".showMe").fadeIn();

});
于 2013-05-09T22:22:46.037 に答える
0

私はお勧めします：

$('.showMe').hide();

$('.hoverMe').on('mouseenter mouseleave', function(e){
    // looks within the hovered-over element:
    $(this)
        // to find the '.showMe' element
        .find('.showMe')
        // stops all currently-running animations
        .stop(true, true)
        // fades the discovered '.showMe' element(s) in, or out
        // depending on whether the mouse entered, or left, the '.hoverMe' element            
        .fadeToggle(e.type == 'mouseenter');
});

JS フィドルのデモ。

ただし、これは jQuery 1.9 を使用します (1.6.4 を使用した元のデモとは異なります)。

ただし、jQuery 1.6.4 を使用したい場合はdelegate()、残念ながら少し醜いですが、を使用できます。

$('.showMe').hide();

$('.hoverMe').parent().delegate('.hoverMe', 'mouseenter mouseleave', function(e){
    $(this).find('.showMe').stop(true, true).fadeToggle(e.type == 'mouseenter');
});

JS フィドルのデモ。

参考文献:

于 2013-05-09T22:17:54.447 に答える
0

クラスを持つ各アイテムについてhoverMe、このコードは、クラスを持つホバーされたアイテムの子を見つけて、showMeそれらfadeIn()を and にしfadeOut()ます。

$(".hoverMe").each(function(){
  $(this).hover(
    function () {
      $(this).children(".showMe").fadeIn();
    },
    function () {
      $(this).children(".showMe").fadeOut();
    }
  );
});
于 2013-05-09T22:24:47.943 に答える