如何：在 mouseOver/mouseOut 上添加/删除类 - JQuery .hover？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16821564/
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
How to: Add/Remove Class on mouseOver/mouseOut - JQuery .hover?
提问by sourcingsynergy
Looking to change the border color on a box..
希望更改框上的边框颜色..
..when the user mouses over/out..
..当用户将鼠标悬停在/离开时..
Here's the attempted code.. Needs Work!
这是尝试的代码..需要工作！
JQuery:
查询：
<script>
$("result").hover(
function () {
$(this).addClass("result_hover");
},
function () {
$(this).removeClass("result_hover");
}
);
</script>
CSS3:
CSS3：
<style>
.result {
height: 72px;
width: 100%;
border: 1px solid #000;
}
.result_hover {
border: 1px solid #fff;
}
</style>
HTML5:
HTML5：
<div class="result">
<div class="item">
<div id="item1">
<i class="icon"></i> ##
</div>
</div>
<div>
Thanks for looking
感谢您的关注
回答by Adil
You forgot the dotof class selectorof result class.
你忘记了结果类dot的类选择器。
$(".result").hover(
function () {
$(this).addClass("result_hover");
},
function () {
$(this).removeClass("result_hover");
}
);
You can use toggleClasson hoverevent
您可以在悬停事件上使用toggleClass
$(".result").hover(function () {
$(this).toggleClass("result_hover");
});
回答by A. Wolff
You could just use: {in and out function callback}
你可以使用：{in and out function callback}
$(".result").hover(function () {
$(this).toggleClass("result_hover");
});
For your example, better will be to use CSS pseudo class :hover: {no js/jquery needed}
对于您的示例，最好使用 CSS 伪类:hover：{不需要 js/jquery}
.result {
height: 72px;
width: 100%;
border: 1px solid #000;
}
.result:hover {
background-color: #000;
}
回答by Klors
Your selector is missing a .and though you say you want to change the border-color- you're adding and removing a class that sets the background-color
您的选择器缺少一个.，尽管您说要更改border-color- 您正在添加和删除一个设置background-color
回答by isJustMe
You are missing the dot on the selector, and you can use toggleClass method on jquery:
您缺少选择器上的点，您可以在 jquery 上使用 toggleClass 方法：
$(".result").hover(
function () {
$(this).toggleClass("result_hover")
}
);
