作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我在使用 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/
最佳答案
1)
正如@Squideyes 提到的,有一种纯 CSS 方法来添加过渡。
只需添加 CSS 选择器:
.img_2:hover {
}
而不是 .transition
2)
我还推荐使用 <img>
而不是 background-images
的 <div>
在你的情况下,因为从我的 Angular 来看,这里的图像是一个内容部分元素,并假设使用 <img>
.
3)
关于 scale
Chrome 中的问题。 transition
似乎有问题和 border-radious
在 Webkit 中。试试改width
和 height
而是作为解决方法。
关于html - safari/chrome 中的圆 Angular 在第一秒悬停时没有变圆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29330381/
COW 不是奶牛,是 Copy-On-Write 的缩写,这是一种是复制但也不完全是复制的技术。 一般来说复制就是创建出完全相同的两份,两份是独立的: 但是,有的时候复制这件事没多大必要
我是一名优秀的程序员,十分优秀!