jQuery突出显示和悬停函数

我一行有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>

（文档）.就绪（函数（）{
$（“#gallerySlideshow li img:first”）.css（“-moz-transform”，“scale（1.1）”）.addClass（'test'）；
$（“#gallerySlideshow li img”）.hover（函数（）{
$（this）.css（'-moz transform'，'scale（1.1'））.addClass（'test'）；
},
函数（）{
$（“#gallerySlideshow li img:first”）.css（“-moz transform”，“scale（0.9）”）.removeClass（'test'）；
},
函数（）{
$（this）.css（'-moz transform'，'scale（0.9'））.removeClass（'test'）；
});
});

我建议使用类，而不是使用

css

方法操纵样式。另外，正如其他人所提到的，您有3个回调函数来调用

hover

方法，该方法最多只需要2个函数。尝试这段代码，它修复了您的问题，并且使用类来缩放和显示阴影

Css

JS

---

注意：您使用的

-moz transform

样式只适用于

Firefox

，您必须使用其他等效样式来支持其他浏览器。

您的悬停函数有三个参数。忘记粘贴正确的代码了吗？@sathishkumar是正确的。Hover只能执行两个功能。查看文档。看起来您正在应用类和css。你应该尝试在现成的类中包含所有css，然后如果你真的需要的话添加多个类。那么这里的问题是什么？Hover将接受两个参数作为函数，但在你的代码中它有三个函数作为Hover的参数？嗨Shankar，谢谢你的帮助，我开始理解你对发送的代码做了什么，谢谢。但它还不能完全满足我的需要，我看不出如何操作它。基本上我有6个图像，当页面打开时，第一个图像应用了类，然后如果用户悬停在其他5个图像上，他们应用了类，第一个图像删除了类，那么如果用户没有悬停在列表中的任何图像上，第一个图像将再次应用类。

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
});