0

我是 jquery 的新手，我希望我的标签的背景颜色在悬停事件上发生变化。

到目前为止，这就是我所拥有的，但我无法回应......

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.animate-colors-min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
$(".form_layout_button_box a").hover(
    function(){
            $(this).animate({backgroundColor: '#D8E4BC'},'slow')
    },
    function() {
            $(this).animate({backgroundColor: '#C4D79B'},'slow')
    });
});
</script>
4

2 回答 2

0

您需要使用.css()将 CSS 属性应用于元素。至于动画，您可以尝试使用.fadeIn()和.fadeOut()。

悬停时，颜色将保留在鼠标悬停上。所以我更喜欢使用mouseover和mouseout。如果你想使用 .hover()，你也可以做一些 if / else 逻辑。

$(".form_layout_button_box a").hover(function(){
     $(this).css('background-color', '#D8E4BC');
});

-或者-

$(".form_layout_button_box a").mouseover(function(){
     $(this).css('background-color', '#D8E4BC');
});


$(".form_layout_button_box a").mouseout(function(){
     $(this).css('background-color', '#333');
});

使用 MOUSEOVER 和 MOUSEOUT 的演示：

http://jsfiddle.net/GZFAZ/3/

CSS中的等效T0：

这会给你与纯 CSS 相同的效果。

.form_layout_button_box a       {background-color:#666;}
.form_layout_button_box a:hover {background-color:#D8E4BC;}
于 2013-02-01T17:58:50.753 回答
0

我发现了我的错误，我没有正确调用查询，

我写过：

 function(){
        $(this).animate({backgroundColor: '#D8E4BC'},'slow')
},

在上面的例子中，我需要将 $(this) 替换为 $($(this)) 并且函数工作。

function(){
       $($(this)).animate({backgroundColor: '#C4D79B'},'fast')
},

谢谢您的建议。

于 2013-02-05T03:00:02.010 回答