嗨,我试图让我的导航栏对鼠标悬停做css焦点效果,所以它不会改变,直到另一个菜单项有鼠标悬停。我试图用Jquery做到这一点。
这是我的代码(我确实导入了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>
这也是我的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>
答案 0 :(得分:8)
最佳实践是使用纯CSS解决它(根本没有任何jQuery)。这是一个简单的例子:
<style type="text/css">
.navItem {
background: yellow;
}
.navItem:hover {
background: blue;
}
</style>
答案 1 :(得分:7)
如果您不关心IE6 - 只需使用:像James Suggeted一样悬停。否则简化您的代码:
$(document).ready(function () {
$('#topNav a').hover(function () {
$(this).addClass('topNavActive');
}, function () {
$(this).removeClass('topNavActive');
});
});
如果你想模仿:焦点(但是使用鼠标悬停):
$(document).ready(function () {
$('#topNav a').hover(function () {
$(this).siblings().removeClass('topNavActive');
$(this).addClass('topNavActive');
}
});
你需要的是什么?
答案 2 :(得分:0)
尝试这样的事情。
$('.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');
});
你必须玩$(这个)更多,所以你可以更多地干你的jQuery(不要重复自己)
答案 3 :(得分:0)
.topNavNormal{
background-color: #B0E0E6;
}
a .topNavNormal{
line-height: 54px;
color: #42647F;
}
如果你不在不同的地方使用这些,我会合并它们然后你就可以
a .topNavActive{
line-height: 54px;
color: #00EEEE;
background-color: #5F9EA0;
}
和一个简单的javascript:
$('topNavNormal').mouseover(function(){
$('topNavNormal').removeClass('topNavActive');
$(this).addClass('topNavNormal');
});
答案 4 :(得分:0)
这对我有用
$(".panel").hover(function () {
$(this).addClass('panel-info');
$(this).removeClass('panel-warning');
}, function () {
$(this).removeClass('panel-info');
$(this).addClass('panel-warning');
});
答案 5 :(得分:0)
这对我有用。如果您想对引导程序感到兴奋。试试这个:
$(".small").hover(function () {
$(this).addClass('lead');
$(this).removeClass('small');
}, function () {
$(this).removeClass('lead');
$(this).addClass('small');
});