javascript - 带有悬停状态的 Jquery CSS 缩略图

Question

我有一个带有 6 个缩略图的幻灯片。缩略图具有 CSS 悬停状态。

使用 JQuery，当用户选择缩略图时，我希望保留悬停图像（因此用户知道选择了哪个缩略图）。

当用户点击第二个缩略图时，所有其他缩略图不再有悬停。

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

Answer 1

使用小提琴中的用户代码更新

---

小提琴：http: //jsfiddle.net/RNYwG/1

---

Javascript：

$(function(){
    $('.thumb').click(function(){
       $('.thumb-hover').removeClass('thumb-hover');
       $(this).addClass('thumb-hover');
    });
});

---

CSS：

#thumbnails > .thumb{
    background-repeat:no-repeat;
    background-position:0 -92px;
    border: 1px solid #999;
    margin: 10px 0 0 10px;
    padding: 0;
    width: 153px;
    height: 91px;
    float: left;
}
#thumbnails > .thumb-hover, .thumb:hover{
    background-position: 0 0;
    cursor: pointer;
}

---

HTML：

<div id="thumbnails">
    <div class="thumb" style="background-image:url('images/slideshow/1_thumb.jpg');" onclick="mySwipe.slide(0, 700)"></div>
    <div class="thumb" style="background-image:url('images/slideshow/2_thumb.jpg');" onclick="mySwipe.slide(1, 700)"></div>
    <div class="thumb" style="background-image:url('images/slideshow/3_thumb.jpg');" onclick="mySwipe.slide(2, 700)"></div>
    <div class="thumb" style="background-image:url('images/slideshow/4_thumb.jpg');" onclick="mySwipe.slide(3, 700)"></div>
    <div class="thumb" style="background-image:url('images/slideshow/5_thumb.jpg');" onclick="mySwipe.slide(4, 700)"></div>
    <div class="thumb" style="background-image:url('images/slideshow/6_thumb.jpg');" onclick="mySwipe.slide(5, 700)"></div>
</div>

Answer 2

在此示例中，缩略图是父级中的兄弟姐妹：

<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) */
}