0

同じ .class で複数のサムネイルを作成したい。サムネイル div には、他の 3 つの div が含まれています。1 つ目は画像、2 つ目はマウス入力時に表示される説明、3 つ目は不透明度を変更するバーです。

マウスが .thumbnail の上に置かれると、両方の要素がそれぞれの機能を実行する必要があります。

私の問題は、すべてのサムネイルが機能を実行するようになったため、すべてのサムネイルが強調表示されるようになったことです。上にカーソルを置いたときにサムネイルが 1 つだけハイライトされるようにするにはどうすればよいですか?

HTML:

<div class="thumbnail">    
    <div class="thumbnail_image">
        <img src="img/Picture.png">
    </div>

    <div class="thumbnail_describe">
        <p>Description</p>
    </div>

    <div class="thumbnail_footer">
        <p>Text</p>
    </div>
</div>

jQuery:

$(document) .ready(function() {

var $thumb = $('.thumbnail')
var $thumb_des = $('.thumbnail_describe')
var $thumb_ft = $('.thumbnail_footer')

//mouseover thumbnail_describe
$thumb.mouseenter(function() {
    $thumb_des.fadeTo(300, 0.8);
});

$thumb.mouseleave(function() {
    $thumb_des.fadeTo(300, 0);
});


//mouseover thumbnail_footer
$thumb.mouseenter(function() {
    $thumb_ft.fadeTo(300, 1); 
});

$thumb.mouseleave(function() {
    $thumb_ft.fadeTo(300, 0.8);
});

});
4

3 に答える 3

0

ページのすべての説明とフッターをそれぞれ含むおよびセレクターにfadeTo関数を適用するため、コードはこのように動作します。$thumb_des$thumb_ft

代わりに、mousenter または mouseleave 関数内で、マウス イベントをトリガーするサムネイルの説明とフッターを選択する必要があります。

コードを最適化するために変更できるもう 1 つのことは、イベント リスニング関数を 1 回だけ使用し、説明とフッターで両方のアクションを同時に実行することです。

$thumb.mouseenter(function() {
    var $this = $(this)
    $this.find('.thumbnail_describe').fadeTo(300, 0.8);
    $this.find('.thumbnail_footer').fadeTo(300, 1); 
});

完全に機能する jsfiddle: http://jsfiddle.net/Yaz8H/

于 2014-01-23T23:47:35.110 に答える