1

6つのサムネイルを含むスライドショーがあります。サムネイルには CSS ホバー状態があります。

JQueryを使用して、ユーザーがサムネイルを選択したときに、ホバー画像をそのままにしておきたい(ユーザーはどのサムネイルが選択されているかがわかります)。

ユーザーが 2 番目のサムネイルをクリックすると、他のすべてのサムネイルにはホバーが表示されなくなります。

$('.thumb').click(function(){
    $(this).css('background-position-y', 'top').siblings(this).css('background-position-y', 'bottom');
});
4

2 に答える 2

0

サムネイルが親内の兄弟であるこの例の場合:

<div>
   <div class="thumb"></div>
   <div class="thumb"></div>
   <div class="thumb"></div>
</div>


$('.thumb').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
});

つまり、CSS は次のようになります。

.thumb{
/*   normal styles */
/*   you can use also CSS3 like: */
/*   transition: 0.2s;    */
}
.thumb.active{
/*    active styles (use !important if needed) */
}
于 2013-04-06T02:40:39.513 に答える