Question

我用jQuery制作了导航效果演示，我想要的效果：当鼠标悬停时，手机名称显示，手机隐藏; 和当mouseout，手机显示和手机名称隐藏; 但鼠标输出效果不起作用。任何人有任何想法？非常感谢！这是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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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效果失败

4 个答案: