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

更新了来自 fiddle 的用户代码

---

fiddle :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>