jQuery高亮和悬停功能

我连续有6张图片，第一张我想要缩放和阴影，如果有其他图片悬停在上面，他们会放大并应用阴影（通过类）和最重要的是我想让这个正式的图像缩小，如果有其他图像悬停，请删除阴影。jQuery高亮和悬停功能

我到目前为止，虽然它可能写完整错误，你会说！

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

来源

2012-01-26 Geoff

您的悬停功能有三个参数。忘记粘贴正确的代码？ – sathishkumar

@sathishkumar是对的。悬停只能采取两项功能。查看文档。 http://api.jquery.com/hover/ – Filip

看起来你正在申请类和CSS。你应该尝试在准备好的课程中包含所有的CSS，如果你确实需要的话，可以添加多个课程。 – JackalopeZero

而不是操纵风格使用css方法我会建议使用类。另外正如其他人所提到的，您有3个回调函数，只需要最多2个函数就可以使用hover方法。试试这个解决了问题的代码，并且使用这些类来缩放和显示阴影。

的CSS

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只会在Firefox的工作风格，你必须使用其他同等款式，以支持其他浏览器。

来源

2012-01-26 10:37:40 ShankarSangoli

嗨尚卡尔，感谢您的帮助，我开始明白你的代码发送做什么，谢谢。它虽然并不完全符合我的需求，但我不知道如何操纵它。 Essentialy我有6个图像，当页面打开时，第一个应用了类，那么如果用户将鼠标悬停在其他任何5上，它们将应用该类，并且第一个类将被删除，如果用户不要将鼠标悬停在列表中的任何图像上，第一个图像将该类再次应用于该图像。 – Geoff

jQuery高亮和悬停功能

回答

相关问题