javascript - 如何制作具有缩放所选图像和其他分散效果的图库

Question

到目前为止我的 javascript 代码:

$(document).ready(function(){
 $('.img1').mouseover(function(){
    /*  $('.img1').css({ "-webkit-transform ": "scale(2)",
                            "-moz-transform": "scale(2)",
                            "-o-transform": "scale(2)",
                            "transform": "scale(2)"
                        });   */
        $('.img2,.img3,.img4,.img5,.img6,.img7,.img8,.img9,.img14,.img10,.img12,.img13,.img15,.img16,.img17').fadeOut(2500);
     $('.img1').mouseout(function(){
     /* $('.img1').css({"-webkit-transform ": "scale(1)",
                            "-moz-transform": "scale(1)",
                            "-o-transform": "scale(1)",
                            "transform": "scale(1)"});  */
        $('.img2,.img3,.img4,.img5,.img6,.img7,.img8,.img9,.img14,.img10,.img12,.img13,.img15,.img16,.img17').fadeIn(2500);
     });
});

这是我的第一张图片的代码。

我想要实现的是，当我将鼠标悬停在一张图片上时，所有其他图片都应该散开。

Answer 1

我宁愿选择纯 CSS，它更直接。使用 :hover 选择器:

.container:hover > div
.container > div:hover

http://jsfiddle.net/GKSLk/ (我只为 webkit 编写，但你可以添加更多浏览器支持)