Question

<div class="post_each">
    <h1 class="post_title">Apartamentos 1 comodo</h1>
    <img class="thumb" src="1.jpg"/>
    <img class="thumb" src="1.jpg"/>
    <img class="thumb" src="1.jpg"/>
    <img class="thumb last" src="1.jpg"/>
</div>
<div class="post_each">
    <h1 class="post_title">Apartamentos 2 comodo</h1>
    <img class="thumb" src="1.jpg"/>
    <img class="thumb" src="1.jpg"/>
    <img class="thumb" src="1.jpg"/>
    <img class="thumb last" src="1.jpg"/>
</div>
<script type="text/javascript">
    $('img.thumb').hover(function {
        $(this).animate({"background" : "white"}, 600);
    });
</script>

hover（）根本不起作用。我只是尝试设置鼠标悬停时应该增加背景颜色或边框大小。

Answer 1

您无法为颜色设置动画（至少采用这种方式），只允许使用带有一个数值的属性。您需要添加一个单独的颜色动画插件。

匿名函数缺少括号：

$('img.thumb').hover(function () {

Answer 2

你不需要jquery ....

.thumb {
background: #000;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;}

.thumb:hover {
background: #fff;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;}

Demo here

Answer 3

您可以使用颜色插件.. reference

$('img.thumb').hover(function(){
   $(this).animate({ backgroundColor: 'white' }, 600);
});

您还可以参考之前的帖子jQuery backgroundColor animation和jQuery animate backgroundColor

Jquery悬停 - 如何制作背景色动画

3 个答案: