的HTML

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");
    });
});

第一个函数用于鼠标悬停，第二个函数用于mouseout。 .css（）函数设置一个CSS属性，在这种情况下是悬停元素的背景颜色。

Answer 3

$(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
    })
});

Answer 4

我想出了两种使用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"

 });
});

Answer 5

$(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>

jQuery在悬停时改变背景

的HTML

的jQuery

5 个答案: