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

具有悬停状态的Jquery CSS缩略图

2 个答案:

更新了来自小提琴