Question

我是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>

Answer 1

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

悬停时，颜色将保留在mouseout上。所以我更喜欢使用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中等同于此：

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

.form_layout_button_box a       {background-color:#666;}
.form_layout_button_box a:hover {background-color:#D8E4BC;}

Answer 2

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

我写道：

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

在上面的例子中，我需要用$（$（this））替换$（this）和函数。

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

感谢您的建议。

无法让Jquery颜色UI在Hover上工作

2 个答案: