悬停时用动画改变div背景图像的宽度

Question

我想改变悬停时div的背景图像宽度。我的代码是：

HTML：

<div class="block2 todrop" target="regbuyer.php"></div>

CSS：

.col1 .block2     { float: right; margin: 104px 0 0 0; width: 208px; height: 104px; background: url(../images/block2-1.jpg) no-repeat center center; background-size: 100% 100%; } 
.todrop       { cursor: pointer; } 

Answer 1

我只是重新阅读的问题，并意识到我是一个doofus

你可以不会主动更改背景大小，但是，您可以使用具有不同背景大小的类，并且可以使用替代方法在两个悬停之间。

$('.block2').hover(function(){ 
    $(this).removeClass('newSize').addClass('oldSize'); 
}, function(){ 
    $(this).removeClass('oldSize').addClass('newSize'); 
});​ 

该CSS。

.newSize{ 
    background-size:25% 25%; 
} 
.oldSize{ 
    background-size:100% 100%; 
} 

刚刚创建元素时就从其中一个元素开始，并且您可以很好地去。

Fiddle

Answer 2

喜欢的东西

$('.block2').live('mouseover', function() { 
    $(this).animate({width: '300px'}); 
}); 

$('.block2').live('mouseout', function() { 
    $(this).animate({width: '208px'}); 
});