jQuery 在鼠标悬停时更改 css 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7253376/
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
change css class on mouse over
提问by Matthew
Hi im trying to make my navigation bar do the css focus effect on mouseover so it will not change until another menu item has the mouseover. Im trying to do it using Jquery.
嗨，我试图让我的导航栏在鼠标悬停时执行 css 焦点效果，这样它就不会改变，直到另一个菜单项有鼠标悬停。我正在尝试使用 Jquery 来做到这一点。
Here is my code(I did import the jquery script btw and my css class):
这是我的代码（我确实导入了 jquery 脚本 btw 和我的 css 类）：
<div id="topNav">
<a href="contact.html"class="topNavNormal"><div id="topNav4" class="topNavNormal">Contact Us</div></a>
<a href="about.html" class="topNavNormal"><div id="topNav3" class="topNavNormal">About Us</div></a>
<a href="services.html" class="topNavNormal"><div id="topNav2" class="topNavNormal">Services</div></a>
<a href="index.html" class="topNavActive"><div id="topNav1" class="topNavActive" style="border-left: 3px solid #c0c0c0;">Home</div></a>
<script type="text/javascript">
$(document).ready(function(){
$('#topNav1').mouseover(function(){
$('#topNav1').removeClass().addClass('topNavActive'),
$('#topNav2').removeClass().addClass('topNavNormal'),
$('#topNav3').removeClass().addClass('topNavNormal'),
$('#topNav4').removeClass().addClass('topNavNormal'),
});
}),
$('#topNav2').mouseover(function(){
$('#topNav2').removeClass().addClass('topNavActive'),
$('#topNav1').removeClass().addClass('topNavNormal'),
$('#topNav3').removeClass().addClass('topNavNormal'),
$('#topNav4').removeClass().addClass('topNavNormal'),
});
}),
$('#topNav3').mouseover(function(){
$('#topNav3').removeClass().addClass('topNavActive'),
$('#topNav1').removeClass().addClass('topNavNormal'),
$('#topNav2').removeClass().addClass('topNavNormal'),
$('#topNav4').removeClass().addClass('topNavNormal'),
});
}),
$('#topNav4').mouseover(function(){
$('#topNav4').removeClass().addClass('topNavActive'),
$('#topNav1').removeClass().addClass('topNavNormal'),
$('#topNav3').removeClass().addClass('topNavNormal'),
$('#topNav2').removeClass().addClass('topNavNormal'),
});
});
</script>
</div>
Also Here is my Css Classes:
另外这里是我的 CSS 类：
<style type="text/css">
#topNav1
{
text-align: center;
font-size: 18px;
float: right;
width: 50px;
height: 64px;
}
#topNav2
{
text-align: center;
font-size: 18px;
float: right;
width: 70px;
height: 64px;
}
#topNav3
{
text-align: center;
font-size: 18px;
float: right;
width: 90px;
height: 64px;
}
#topNav4
{
text-align: center;
font-size: 18px;
float: right;
width: 90px;
height: 64px;
}
#topNav1, #topNav2, #topNav3{
border-right: 1px solid #c0c0c0;
}
#topNav4{
border-right: 3px solid #c0c0c0;
}
a .topNavNormal{
line-height: 54px;
color: #42647F;
}
.topNavNormal{
background-color: #B0E0E6;
}
a .topNavActive{
line-height: 54px;
color: #00EEEE;
background-color: #5F9EA0;
}
</style>
回答by Samich
If you don't care about IE6 - just use :hover like James suggeted. Otherwise simplify your code:
如果您不关心 IE6 - 只需使用 :hover 就像 James 建议的那样。否则简化您的代码：
$(document).ready(function () {
$('#topNav a').hover(function () {
$(this).addClass('topNavActive');
}, function () {
$(this).removeClass('topNavActive');
});
});
if you want to immitate :focus (but with mouseover):
如果你想模仿 :focus （但鼠标悬停）：
$(document).ready(function () {
$('#topNav a').hover(function () {
$(this).siblings().removeClass('topNavActive');
$(this).addClass('topNavActive');
}
});
is it what you need?
这是你需要的吗？
回答by Michael
The best practice is to solve it with pure CSS (without any jQuery at all). here's a quick example:
最佳实践是使用纯 CSS（根本没有任何 jQuery）来解决它。这是一个快速示例：
<style type="text/css">
.navItem {
background: yellow;
}
.navItem:hover {
background: blue;
}
</style>
回答by Michael Koper
try something like this.
尝试这样的事情。
$('.topnav_class').over(function(){
// delete all the classes of hover
$(.topnav_class).removeClass('hover');
// add the hover class just to this node
$(this).addClass('hover);
}, function(){
$(this).addClass('hover');
});
You have to play with $(this) more so you can do your jQuery a little more DRY (Do not repeat yourself)
你必须多玩 $(this) 才能让你的 jQuery 更干一点（不要重复自己）
回答by James Khoury
.topNavNormal{
background-color: #B0E0E6;
}
a .topNavNormal{
line-height: 54px;
color: #42647F;
}
if you aren't using these in different places i'd merge them and then you can just
如果你不在不同的地方使用这些，我会合并它们，然后你就可以
a .topNavActive{
line-height: 54px;
color: #00EEEE;
background-color: #5F9EA0;
}
and a simple javascript like:
和一个简单的javascript，如：
$('topNavNormal').mouseover(function(){
$('topNavNormal').removeClass('topNavActive');
$(this).addClass('topNavNormal');
});
回答by Lucas Fernandez Roldan
This Works for me
这对我有用
$(".panel").hover(function () {
$(this).addClass('panel-info');
$(this).removeClass('panel-warning');
}, function () {
$(this).removeClass('panel-info');
$(this).addClass('panel-warning');
});
回答by imrvasishtha
This works for me. If you want to do something excited with bootstrap. Try this:
这对我有用。如果你想用 bootstrap 做一些令人兴奋的事情。尝试这个：
$(".small").hover(function () {
$(this).addClass('lead');
$(this).removeClass('small');
}, function () {
$(this).removeClass('lead');
$(this).addClass('small');
});
