<!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最后一张前三张不会振动，为什么会出现这样的问题啊？求大神
2 回答
weibo_哆啦A梦有大口袋_0
TA贡献107条经验 获得超146个赞
我拿你代码试了一下，原因是
-webkit-filter:blur(3px);
-ms-filter:blur(3px);
filter:blur(3px);
模糊效果：执行完transform: scale(1, 1); 后,再给图片模糊效果，所以会振振
添加回答
举报
0/150
提交
取消