jQuery mouseout 效果失败

Question

我通过jQuery制作了一个导航效果演示，我想要效果：当鼠标悬停时，手机名称 phone 显示，手机名称 phone 隐藏；和 mouseout 时，手机 phone 显示，手机名称 phone 隐藏；但是鼠标移开效果不起作用。有人知道吗？非常感谢！这是 jQuery 代码。

$(document).ready(function(){
    //initial
    $("#active").css("left", $("#a1").offset().left);
    $("#navul").on("mouseover","a" ,function(){
        $(this).html('<li><img src="img/00'+$(this).attr('num')+'a.png"></li>');
        //$("#active").stop().animate({left: $(this).offset().left},400);
    });
    $("#navul").on("mouseout","a" ,function(){
        $(this).html('<li><img src="img/00'+$(this).attr('num')+'.png"></li>');
    });

});

这是演示 http://54.69.15.179/autemp

Answer 1

您的标记无效，尽管您想让它正常工作，但也请尝试将事件与 li 耦合。除此之外，你必须使用 .closest() 来获取相关的 a 标签，

$(document).ready(function(){
    //initial
    $("#active").css("left", $("#a1").offset().left);
    $("#navul").on("mouseover","a,li" ,function(){
        $(this).closest('a').html('<li><img src="img/00'+$(this).attr('num')+'a.png"></li>');
        //$("#active").stop().animate({left: $(this).offset().left},400);
    });
    $("#navul").on("mouseout","a,li" ,function(){
        $(this).closest('a').html('<li><img src="img/00'+$(this).attr('num')+'.png"></li>');
    });

});

Answer 2

你可以这样试试

$(document).ready(function(){
        //initial
        $("#active").css("left", $("#a1").offset().left);

        $("#navul a img").on("mouseover", function(){
            $(this).css('src', 'img/00'+$(this).attr('num')+'a.png');
            $("#active").stop().animate({left: $(this).offset().left},400);
        }).on("mouseout", function(){
            $(this).css('src', 'img/00'+$(this).attr('num')+'.png');
        });

    });

我不确定，但我认为它对你有帮助。

Answer 3

使用有效的 html 标记查看此示例。

JSFiddle

$(document).ready(function() {
    //initial

    $("#active").css("left", $("#a1").offset().left);
    $('.hover').on('mouseover mouseout', function(event) {
        if (event.type == 'mouseover') {
          
            var imgeSrc = "http://54.69.15.179/autemp/img/00" + $(this).attr('num') + "a.png";
            $(this).attr("src", imgeSrc);
          $("#active").stop().animate({
                left: $(this).offset().left
            }, 400);

        } else {

            var img2Src =
                "http://54.69.15.179/autemp/img/00" + $(this).attr('num') + ".png";
         $(this).attr("src", img2Src);

        }
    });
});

body{padding:0;margin:0;color: #FFF;}
.wrapper{
 width: 1440px;
 padding: 0;
 margin: 0 auto;
 text-align: center;
}
#slideshow{
 position: relative;
 width: 100%;
 margin: 0 auto;
 text-align: center;
 height: 519px;
 display: block;
}
#navwrapper{
 position: relative;
 top: 0;
 margin: 0 auto;
 width: 100%;
 height: 77px;
 background-color: rgba(224,252,255,0.7);
 z-index: 20;
}
#nav{
 width: 980px;
 padding: 0;
 margin: 0 auto;
 height: 77px;
 text-align: left;
}

#navtitle{
 background-color: rgba(224,252,255,0.5);
 height: 77px;
 width: 203px;
 float: left;
 margin-right: 0px;
 text-align: center;
}
#nav {
 position: relative;
}
#nav ul{
 padding: 0; margin: 0; text-decoration: none; list-style: none;
 float: left;
}
#nav ul li{
 display: block;
 height: 77px;
 float: left;
 width: 110px;
 text-align: center;
 border-right: 1px solid rgba(255,255,255,0.4);
}


#nav ul li:after {
 border-bottom-color: #333; 
 position: absolute;
 top: -24px;
 left: 255px;
 z-index: 1;
}



#active{
 position: absolute;
 left: 00px;
 z-index: 30;
 top:0;
}
#nav{
 z-index:41;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="wrapper">
 <div id="slideshow">

  <div id="navwrapper">
   <div id="nav">
    <div id="navtitle">
                    <img src="http://54.69.15.179/autemp/img/bartitle.png"/>
    </div>
    
    <ul id="navul" style="z-index:41;">
               <li><a href="#" id="a1"><img class="hover" src="http://54.69.15.179/autemp/img/001.png" num="1"/></a></li>
               <li><a href="#" id="a2"><img class="hover" src="http://54.69.15.179/autemp/img/002.png"  num="2"/></a></li>
                <li><a href="#" id="a3" ><img class="hover" src="http://54.69.15.179/autemp/img/003.png" num="3"/></a></li>
                <li><a href="#" id="a4"><img class="hover" src="http://54.69.15.179/autemp/img/004.png"  num="4"/></a></li>
                <li><a href="#" id="a5"><img class="hover" src="http://54.69.15.179/autemp/img/005.png"  num="5"/></a></li>
                <li><a href="#" id="a6" ><img class="hover" src="http://54.69.15.179/autemp/img/006.png" num="6"/></a></li>
                <li> <a href="#" id="a7" ><img class="hover" src="http://54.69.15.179/autemp/img/007.png" num="7"/></a></li>
     </ul>
   </div>

            <img id="active" src="http://54.69.15.179/autemp/img/active.png"/>
  </div>
 </div>
</div>

Answer 4

以下代码有效。 DEMO

$(document).ready(function () {
    //initial
    $("#active").css("left", $("#a1").offset().left);
    $("#navul li").mouseover(function () {
        var src = "http://54.69.15.179/autemp/img/00" + $(this).closest($("a")).attr('num') + "a.png";
        $(this).find("img").attr("src", src);
        //$("#active").stop().animate({left: $(this).offset().left},400);
    });
    $("#navul li").mouseout(function () {

        var src = "http://54.69.15.179/autemp/img/00" + $(this).closest($("a")).attr('num') + ".png";
        $(this).find("img").attr("src", src);
    });
});

jQuery mouseout 效果失败

jQuery mouseout effect failed

javascript

jquery

mouseout