我有 DIV 和 CSS 属性:
.box {
background-image: url(images/img.jpg);
}
我选择了this过渡效果库。我想在某些页面上使用缩放 效果。缩放元素的典型语法是这样的:
$('.box').mouseover(function() {
$(this).transition({ scale: 2.2 });
});
上面的代码没有任何错误,但它扩展了整个 DIV 及其中的所有元素。
如何只缩放背景图片???
最佳答案
我用 JavaScript 找到了解决方案。
$(document).on("mouseover", ".list", function(){
$(this).css({"background-size":"150%", "transition":"all 0.5s ease"});
}).on("mouseout", ".list", function(){
$(this).css({"background-size":"100%", "transition":"all 0.5s ease"});
});
.list{ width:/*100%*/ 90%; float:left; padding:15px 15px 15px; background:url("http://cdn.macrumors.com/article-new/2014/09/iphone_6_iphone_6_plus1.png") no-repeat center center ; height:150px; background-size:100% auto; transition:all 0.5s ease 1s;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list">
xd
</div>
关于jquery - 使用 jQuery Transit 调整背景图像的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35763568/