导航栏的 jQuery 悬停效果不起作用？

Posted 2023-05-08

【中文标题】导航栏的 jQuery 悬停效果不起作用？

【英文标题】：jQuery Hover Effect for NavBar not working?

【发布时间】：2013-03-28 02:46:19

【问题描述】：

由于某种原因，我无法让悬停效果发挥作用 html：

<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中有它，所以我不明白为什么它不起作用。

【问题讨论】：

显示的 jQuery 代码只是一个尝试悬停效果的测试，所以我知道它只能在一个链接上工作

你不能只用 jQuery 为 color 和 background 制作动画，请使用 jQuery UI

【参考方案1】：

您需要在jQuery 之后包含jQuery UI Library ：

LIVE DEMO

$("#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;

或其他脚本：

$("#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);
);

【讨论】：

这不会像 roXon 和 vletech 解释的那样起作用。需要原始下载中未包含的其他 jQuery 文件。

【参考方案2】：

在你的 a 标签 CSS 中试试这个

#navbarcontainer ul li a 

        display: block;
        height: 50px;

        text-decoration: none;
        line-height: 50px;
        width: 100px;
        font-size: 20px;
        font-family: Calibri;
        cursor: pointer;
    

【讨论】：

您是否查看了@roXon 他/她的评论。这是有效的。

是的，我现在正在测试它。

【参考方案3】：

您正在尝试为单独使用 jQuery 无法实现的背景颜色和文本颜色设置动画。要在描述中实现您在上面尝试执行的操作，您需要包含颜色动画插件 available here。

包含后，您的代码应该可以按预期工作。

编辑

请查看包含插件的Fiddle example。

$('#color').on('click',function()
    $(this).animate(backgroundColor:'#400101', color:'#fff'); 
);

【讨论】：

我添加了 jQuery UI 1.10.2 并修复了部分问题。现在只是在玩它，谢谢。

抱歉，我忘了说它也适用于 UI。很高兴你现在一切正常

谢谢！以为我编码错了，没有意识到 jQeuery 需要帮助哈哈。

【参考方案4】：

你需要一个带有 jQ​​uery 的 library to animate color 并且你需要为背景颜色而不是背景设置动画，并且在淡出时你需要淡出回蓝色，而不是没有。

这个 js fiddle 展示了你的演示工作：http://jsfiddle.net/Mbppv/

这是我将您的 js 更改为：

$("#dependant1").hover(function () 
    $('.dependant1').stop().animate("background-color": '#fff' , "slow");
    $('#dependant1').stop().animate(color: '#01216D', 'font-weight': 'bold', "slow");
, function () 
    $('.dependant1').stop().animate("background-color": '#01216D' , "slow");
    $('#dependant1').stop().animate(color: '#fff', 'font-weight': 'normal', "slow");
);

另请参阅有关动画颜色的相关帖子：jQuery animate backgroundColor

【参考方案5】：

您可以使用 CSS 伪类 hover 为元素添加悬停效果。将此样式添加到您的 CSS 文件会在悬停时为 li 应用红色背景：

li.dependant1:hover 
    background-color: red;

http://jsfiddle.net/xuHjJ/

【讨论】：

我认为我可以使用 CSS 来实现，但我认为使用 jQuery 会更流畅。现在将使用 CSS 运行，谢谢。

可以添加CSS过渡来创建动画效果w3schools.com/css3/css3_transitions.asp

虽然 jQuery 可以工作，但这可能是更简单（也更可行）的解决方案。 jQuery 更好地保存更复杂的东西。最后，它真的是你的船，但我发誓奥卡姆的剃刀对这个。 :)