html - safari/chrome 中的圆 Angular 在第一秒悬停时没有变圆

Question

我在使用 Safari/Chrome 时遇到问题。 在这些浏览器上(悬停时)我的圆 Angular 变成正方形，然后变回圆 Angular 。 Here is the code

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>

它就像缩小带有圆 Angular 的 div 中带有背景图像的 div 关于如何解决这个问题的任何想法......

[1]: http://jsfiddle.net/Lqfmdah5/6/

Answer 1

1)

正如@Squideyes 提到的，有一种纯 CSS 方法来添加过渡。

只需添加 CSS 选择器:

.img_2:hover {

}

而不是 .transition

2)

我还推荐使用 <img>而不是 background-images的 <div>在你的情况下，因为从我的 Angular 来看，这里的图像是一个内容部分元素，并假设使用 <img> .

更多信息:IMG vs background-image

3)

关于 scale Chrome 中的问题。 transition 似乎有问题和 border-radious在 Webkit 中。试试改width和 height而是作为解决方法。

查看 https://jsfiddle.net/Lqfmdah5/7/