<!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最后一張前三張不會振動,為什么會出現(xiàn)這樣的問題啊?求大神
鼠標hover過圖片時候圖片放大并消除模糊會導致其他圖片振一下
門牙有點晃
2016-06-08 16:45:08