1

我有这个代码

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 退出时，背景应该返回到白色。我怎样才能做到这一点？

4

5 回答 5

9

你必须使用jQuery吗？

更“正确”的方法是为您的班级添加悬停样式。

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

有关示例，请参见此处。 http://jsfiddle.net/maurice_butler/5q6QM/

于 2012-05-10T00:53:29.917 回答
4

您可以将其简化为使用 .hover()：

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

第一个函数为 mouseover 运行，第二个函数为 mouseout 运行。.css() 函数设置 CSS 属性，在本例中为悬停元素的背景颜色。

于 2012-05-10T00:49:25.983 回答
4 
$(function(){
    $(".aQli").on('mouseover', 'li', function(){  //using "on" for optimization
        this.style.backgroundColor = 'red';       //native JS application
    }).on('mouseout', 'li', function(){           //chain to avoid second selector call
        this.style.backgroundColor = 'white';     //native JS application
    })
});
于 2012-05-10T00:49:36.733 回答
2

我想出了两种使用 jQuery 的方法。一种方法是使用 jQuery 直接更改 css，使用 .css() 设置背景颜色。

//css
ul#aQul li{
  display : inline-block;
  padding : 5px;
  margin : 5px;
}

//javascript use jQuery
$(document).ready(function(){
 $(".aQli").mouseover(function(){
    $(this).css({
        "background-color" :　"red",
        "cursor" : "pointer"
    });
 });
 $(".aQli").mouseout(function(){
    $(this).css({
        "background-color" : "transparent",
        "cursor" : "default"
    });

 });
});​​

另一种方法是使用 jQuery 在发生悬停时添加特定的类属性，并且有特定的 css 规则来更改背景颜色。

//css, need to specify the state of hover
 ul#aQul li.hover{     //li elements which have "hover" class
   cursor:pointer;
   background-color : red;
 }

//javascript
$(document).ready(function(){
 $(".aQli").mouseover(function(){
    $(this).addClass("hover")      //hover, add class "hover"
 });
 $(".aQli").mouseout(function(){
    $(this).removeClass("hover");  //hover out, remove class "hover"

 });
});​
于 2012-05-10T03:43:37.630 回答
0 

$(document).ready(function(){
    $(".box").hover(function(){
        $(this).css("background-image", "url(ENETR URL HERE)");
    },
    function(){
        $(this).css("background", "#FFF");
    });
});
.box{
  width:200px;
  height:200px;
  border: 1px solid black;
}
<html>

<head>

  <link rel="stylesheet" href="css/style.css">


</head>
<body>


  <div class="box">
    
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="js/script.js"></script>



</body>
</html>

于 2015-01-28T19:44:47.003 回答