我在Safari/Chrome浏览器上遇到了问题。 在这些浏览器上(悬停时),我的圆角变成了正方形,然后又恢复为圆角。这里是代码。
CSS
div.img-cont {
float:left;
position:relative;
margin:10px 20px 0 0px;
width:180px;
height:160px;
border:0px solid #FFF;
overflow:hidden !important;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}
div.img-zoom {
float:left;
position:relative;
margin:-20px 0 0 -20px;
width:220px;
height:200px;
background-position:center center !important;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.transition {
-webkit-transform: scale(0.93,0.93);
-moz-transform: scale(0.93,0.93);
-ms-transform: scale(0.93,0.93);
-o-transform: scale(0.93,0.93);
transform: scale(0.93,0.93);
}
.f_border{
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}
HTML
<div class="Box_1x1_front" style="height:180px; background:#eaeaea; ">
<a class="leftAllPlace" rel="thumb" title="" href="http://bonavestis.pl/image/cache/data/Produkty/Sukienki/Sukienka%20JUST%20UNIQUE%20Bandażowa%20W%20Beżu%20+Złoto/Image001-885x885.jpg">
<div class="img-cont f_border">
<div class="img-zoom img_2">
<div style="float:left; width:100%; height:100%; background-image:url('http://bonavestis.pl/image/cache/data/Produkty/Sukienki/Sukienka%20JUST%20UNIQUE%20Bandażowa%20W%20Beżu%20+Złoto/Image001-372x372.jpg');"></div>
</div>
</div>
</a>
</div>
这里是JavaScript代码
<script>
$(document).ready(function(){
$('.img_2').hover(function() {
$(this).addClass('transition');
}, function() {
$(this).removeClass('transition');
});
});
</script>
这就像是在一个带有圆角的div容器内部放置一张背景图片,但发现这个div容器缩小了。你有什么想法如何解决呢...
[1]: http://jsfiddle.net/Lqfmdah5/6/