Question

我连续有6张图片，第一张我需要缩放和阴影，然后如果其他任何图像都悬停在它们上面，它们会向上扩展并应用阴影（通过类），最重要的是如果另一个图像悬停在上面，我希望原始图像缩小并删除阴影。

到目前为止我有这个，虽然它可能写得非常错，但你会说！

<script type="text/javascript">
(document).ready(function() {
    $("#gallerySlideshow li img:first").css('-moz-transform', 'scale(1.1)').addClass('test');
    $("#gallerySlideshow li img").hover(function(){
        $(this).css('-moz-transform', 'scale(1.1)').addClass('test');
    },
function () {
        $("#gallerySlideshow li img:first").css('-moz-transform',  'scale(0.9)').removeClass('test');
},
    function () {
        $(this).css('-moz-transform', 'scale(0.9)').removeClass('test');
    });
});
</script>

Answer 1

我建议使用类，而不是使用css方法操作样式。另外，正如其他人所提到的，你有{3}方法的3个回调函数，它只需要最多2个函数。尝试使用此代码修复您的问题，并使用类来缩放和显示阴影。

的CSS

hover

JS

img{
   //default style, add whatever style you want here
   -moz-transform: scale(1.1);
}
.scaleAndShadow{
    -moz-transform: scale(1.1);//Apply on hover
}

注意：您使用$(document).ready(function() { $("#gallerySlideshow li img").hover(function(){ $(this).addClass('scaleAndShadow') .siblings().removeClass('scaleAndShadow'); }, function () { $(this).removeClass('scaleAndShadow'); }) .first().addClass('scaleAndShadow');//Set the class to first img on load });的样式仅适用于-moz-transform，您必须使用其他等效样式来支持其他浏览器。

jQuery高亮和悬停功能

1 个答案: