大佬教程收集整理的这篇文章主要介绍了NavBar的jQuery悬停效果不起作用？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<div id="navbarcontainer">
<ul>
<li id="left" class="current">
<a id="current">Home</a></li>
<li class="dependant1">
<a id="dependant1">services</a></li>
<li id="right" class="dependant2">
<a id="dependant2">Contact</a></li>
</ul>
</div>
CSS：
#navbarcontainer { margin: 0; padding: 0; height: 50px; BACkground: #01216D; } #navbarcontainer ul { clear: both; margin: 0; padding: 0; list-style: none; } #navbarcontainer li { display: inline-block; height: 50px; width: 100px; list-style: none; text-align: center; -moz-transition: .5s; -o-transition: .5s; -webkit-transition: .5s; transition: .5s; /* Firefox 4 */ /* Opera */ /* Safari and Chrome */ } #navbarcontainer ul li a { text-decoration: none; line-height: 50px; width: 100px; font-size: 20px; font-family: Calibri; cursor: pointer; } #left { margin-right: 40px; margin-left: 20px; } #right { margin-left: 40px; } .current { BACkground: #fff; } #current { color: #01216D; font-weight: bold; } #dependant1,#dependant2 { color: #fff; }
jQuery的：
$("#dependant1").hover(function () {
$('.dependant1').stop().animate({BACkground: '#fff' },"slow");
$('#dependant1').stop().animate({Color: '#01216D','font-weight': 'bold'},"slow");
},function () {
$('.dependant1').stop().animate({ BACkground: 'none' },"slow");
$('#dependant1').stop().animate({Color: '#fff','font-weight': 'normal'},"slow");
});
我觉得它与jQuery有关,但我在document.load中有它,所以我不明白为什么它不起作用.
$("#navbarcontainer li").hover(function () {
$(this).find('a').stop().animate({ color: '#01216D',BACkgroundColor: '#fff'},800);
},function () {
$(this).find('a').stop().animate({ color: '#fff',BACkgroundColor: '#01216D'},800);
});
HTML：
<div id="navbarcontainer">
<ul>
<li><a id="current">Home</a></li>
<li><a>services</a></li>
<li><a>Contact</a></li>
</ul>
</div>
CSS：
#navbarcontainer { margin: 0; padding: 0; BACkground: #01216D; } #navbarcontainer ul { clear: both; margin: 0; padding: 0; list-style: none; overflow:hidden; } #navbarcontainer li { list-style: none; text-align: center; -moz-transition: .5s; -o-transition: .5s; -webkit-transition: .5s; transition: .5s; } #navbarcontainer ul li a { float:left; color:#fff; BACkground: #01216D; padding:10px 30px; text-decoration: none; line-height: 50px; font-size: 20px; font-family: Calibri; cursor: pointer; } #current { BACkground: #fff !important; color: #01216D !important; font-weight: bold; }
或者另@L_450_4@脚本：
$("#navbarcontainer li").on('mouseenter mouSELEave',function ( e ) {
var set = e.type=='mouseenter' ? {C:"#01216D",bg:"#fff"} : {C:"#fff",bg:"#01216D"} ;
$('a',this).stop().animate({ color: set.c,BACkgroundColor: set.bg},800);
});
以上是大佬教程为你收集整理的NavBar的jQuery悬停效果不起作用？全部内容，希望文章能够帮你解决NavBar的jQuery悬停效果不起作用？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。