jQuery在悬停时改变背景

Question

我有这个代码

HTML

<div id="addQuesion">
    <ul id="aQul">
        <li class="aQli"></li>
        <li class="aQli"></li>
    </ul>
</div>

我的jQuery是

jQuery的

$(document).ready(function(){
    $(".aQli").mouseover(function(){

    });
    $(".aQli").mouseout(function(){

    });
});

我希望当悬停在一个li上时,背景应该是红色的,并且从那个li退出时,背景应该返回白色.我怎样才能做到这一点？

Answer 1

你必须使用jQuery吗？

更"正确"的方法是为您的班级添加悬停样式.

.aQli:hover{
   background-color: red;   
}?

请看这里的例子. http://jsfiddle.net/maurice_butler/5q6QM/

Answer 2

您可以使用 .hover() 来简化它：

$(document).ready(function(){
    $(".aQli").hover(function(){
        $(this).css("background", "#F00");
    },
    function(){
        $(this).css("background", "#FFF");
    });
});

第一个函数在鼠标悬停时运行，第二个函数在鼠标移开时运行。.css() 函数设置 CSS 属性，在本例中是悬停元素的背景颜色。