2

div に表示される情報のブロックがあります。ホバー時に特定の div の css を変更したい。しかし、現在、誰かの div にカーソルを合わせると、すべての div の css が変更されます。

これが私のjqueryコードです:-

<script>
        $('.student-box').hover( function(){
            $('.student-info').css('opacity', '0.8');
            $('.student-info').css('margin-top', '-20px');
            $('.student-info').css('height', '130%');
            $('.onhover-ul').show();
        },
        function(){
            $('.student-info').css('opacity', '0.7');
            $('.student-info').css('margin-top', '75px');
            $('.student-info').css('height', '63%');
            $('.onhover-ul').hide();
        });
    </script>

ホバーされている div のみが影響を受けるように jquery を変更するにはどうすればよいですか。多くの学生が存在する可能性があり、それは多くの「学生ボックス」が生成されることを意味します。

4

2 に答える 2

2 
$('.student-box').hover( function(){       
       // $(this) is DOM element what hovered at this moment

       $(this).find('.student-info').css({
          'opacity': '0.8',
          'margin-top', '-20px',
          'height', '130%'
       });
   },
   function(){
         // unhover code like hover
   })
);
于 2013-04-20T19:53:56.067 に答える
1

これを試して：

$('.student-box').hover( function(){
    var div = $(this);

    div.find('.student-info').css({
         opacity: '0.8'
         marginTop: '-20px',
         height: '130%'
    });
    div.find('.onhover-ul').show();
}, function(){
    var div = $(this);

    div.find('.student-info').css({
        opacity: '0.7',
        marginTop: '75px',
        height: '63%'
    });
    div.find('.onhover-ul').hide();
});

div でメソッドを呼び出しても問題ありませんhover()。コールバック内では、「クラスですべての要素を選択してください ...」と言っているだけです。

コールバック関数内にthisは、実際にイベントをトリガーした DOM 要素があります。したがって、これを jQuery でラップして、メソッドを呼び出すことができます。

この方法でメソッドを使用するcss()ことはお勧めしませんが、クラス名を追加してスタイリングをスタイル シートに移動することをお勧めします。

于 2013-04-20T19:55:39.083 に答える