鼠标hover过图片时候图片放大并消除模糊会导致其他图片振一下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .new-image{
            width: 25%;
            height:300px;
            float:left;
            overflow:hidden;
            background:#333;
        }
        .new-image-img{
            transition:all .6s;
            -webkit-filter:blur(3px);
            -ms-filter:blur(3px);
            filter:blur(3px);
            transform: scale(1, 1);
        }
        .new-image-class{
            transition:transform .6s;
            transform: scale(1.2, 1.2);
        }
    </style>
</head>
<body>
<div class="new-image">
    <img class="new-image-img" src="http://www.ydban.cn/images/index/new_image_1.jpg" alt="image"/>
</div>
<div class="new-image">
    <img class="new-image-img" src="http://www.ydban.cn/images/index/new_image_2.jpg" alt="image"/>
</div>
<div class="new-image">
    <img class="new-image-img" src="http://www.ydban.cn/images/index/new_image_3.jpg" alt="image"/>
</div>
<div class="new-image">
    <img class="new-image-img" src="http://www.ydban.cn/images/index/new_image_4.jpg" alt="image"/>
</div>
 
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
 
<script>
    $(".new-image").hover(function(){
        $(this).children("img").removeClass("new-image-img").addClass("new-image-class");
    },function(){
        $(this).children("img").removeClass("new-image-class").addClass("new-image-img");
    });
</script>
</html>

代码如上，比如说鼠标放在第一张图上时后三张图片的链接处都会振一下，不是很显眼。hover第二张后两张会振。hover最后一张前三张不会振动，为什么会出现这样的问题啊？求大神

门牙有点晃

浏览 3052回答 2

2回答

weibo_哆啦A梦有大口袋_0

我拿你代码试了一下，原因是 -webkit-filter:blur(3px); -ms-filter:blur(3px); filter:blur(3px);模糊效果：执行完transform: scale(1, 1); 后,再给图片模糊效果，所以会振振

2 0

weibo_哆啦A梦有大口袋_0

你的类名是个啊

0 0

随时随地看视频慕课网APP