javascript jQuery 在悬停时更改背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10526121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery changing background on hover
提问by William Kinaan
I have this code
我有这个代码
html
html
<div id="addQuesion">
<ul id="aQul">
<li class="aQli"></li>
<li class="aQli"></li>
</ul>
</div>
and my jQuery is
我的 jQuery 是
jQuery
jQuery
$(document).ready(function(){
$(".aQli").mouseover(function(){
});
$(".aQli").mouseout(function(){
});
});
I want when hovering over a li, the background should be red, and on exit from that li, the background should return to white. How can I do this?
我希望当鼠标悬停在一个 li 上时，背景应该是红色的，在离开那个 li 时，背景应该返回白色。我怎样才能做到这一点？
回答by Maurice Butler
Do you have to use jQuery?
你必须使用jQuery吗？
The more "correct" way would be to add a hover style to your class.
更“正确”的方法是为您的班级添加悬停样式。
.aQli:hover{
background-color: red;
}?
See here for an example. http://jsfiddle.net/maurice_butler/5q6QM/
有关示例，请参见此处。 http://jsfiddle.net/maurice_butler/5q6QM/
回答by Surreal Dreams
You can simplify this to use .hover():
您可以将其简化为使用 .hover()：
$(document).ready(function(){
$(".aQli").hover(function(){
$(this).css("background", "#F00");
},
function(){
$(this).css("background", "#FFF");
});
});
The first function runs for mouseover and the second for mouseout. The .css() function sets a CSS property, in this case a background color on the hovered element.
第一个函数用于鼠标悬停，第二个函数用于鼠标悬停。.css() 函数设置一个 CSS 属性，在本例中是悬停元素的背景颜色。
回答by Joseph
$(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
})
});
回答by zhujy_8833
I came up two ways to do that by using jQuery. One way is to use jQuery to change the css directly, using .css() to set the background color.
我想出了两种使用 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"
});
});
});??
The other way is using jQuery to add a specific class attribute if hover happens, and there is a specific css rule to change the background color.
另一种方法是使用 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"
});
});?
回答by William Kinaan
$(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>