javascript - 为什么 jquery hover 在 jsfiddle 中工作但在我的 html 布局中不工作？

我正在制作一个带有下拉登录框的网页。当鼠标悬停在使用 jquery 悬停的导航菜单中的列表项上时，登录框应向下滑动。

登录表单隐藏在 display: none 的 css 中，直到将鼠标悬停在登录链接上。

这在 jsfiddle 中非常有效:

/**
 * @author Øystein Jacobsen
 * @date 24.03.2015
 */

$("#login").hover(function() {
	$("#login-form").slideToggle();
});

body {
	background: gray url("../img/bg-default.png") no-repeat;
	background-size: cover;
	font-size: 85%;
	font-family: Arial, 'Lucicda Sans Unicode';
	line-height: 1.5;
	text-align: left;
	margin: 0 auto;
	width: 70%;
	clear: both;
}

a {
	color: #474E69; /*#CF5C3F;*/
	text-decoration: none;
}

a:link, a:visited {
	color: #474E69; /*#CF5C3F;*/
}

a:hover, a:active {
	color: white;
	background-color: #474E69; /*#CF5C3F;*/
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}


/* HTML4 FALLBACK */
header, section, footer, aside, nav, main, article, figure {
    display: block; 
}


/* HEADER */
.main-header img {
	width: 100%;
	height: auto;
}


/* NAVIGATION */
.navigation {
	background-color: #666;
	height: 40px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-bottom: 2%;
	padding-right: 40px;
}

.navigation ul {
	list-style: none;
	margin: 0 auto;
}

.navigation ul.main-nav li {
	float: left;
	display: inline;
}

.navigation ul.ext-nav li {
	float: right;
	display: inline;
}

.navigation ul li a {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.navigation a:link, .navigation a:visited {
	color: white;
	display: inline-block;
	padding: 10px 20px;
	height: 20px
}

.navigation a:hover, .navigation a:active, .navigation .active a:link, .navigation .active a:visited {
	background-color: #474E69; /*#CF5C3F;*/
	text-shadow: none;
}


/* CONTENT */
.main-content {
	width: 70%;
	float: left;
	line-height: 25px;
}

.main-content article {
	background-color: white;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 2% 5%;
	margin-bottom: 3%;
}

.main-content .post-info {
	font-style: italic;
	font-size: 80%;
	color: #999;
}



/* SIDEBAR */
.sidebar {
	width: 28%;
	float: left;
	margin-left: 2%;
}

.sidebar article {
	background-color: white;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 2% 5%;
	margin-bottom: 8%;
}


/* FOOTER */
.main-footer {
	width: 100%;
	height: 40px;
	float: left;
	clear: both;
	margin-bottom: 2%;
	text-align: center;
	color: white;
	background-color: #666;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.main-footer p {
	margin: 10px auto;
}

/* login.css */
#login-form  {
	position: absolute;
	right: 15%;
    display: none;
    float: right;
    clear: both;
    background-color: #666;
    padding: 0 2% 2% 2%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#login-form .text {
	width: 100%;
    float: right;
    margin-bottom: 2%;
}

#login-form .submit {
    float: right;
}

/* mobile.css */
/* SCREENS LOWER THAN 750xp NO LOGIN */
@media only screen and (min-width: 625px) and (max-width: 750px) {	
	.navigation ul.ext-nav {
		display: none;
	}
	
	.navigation {
        padding-right: 0;
	}
}


/* SCREENS BETWEEN 150px & 600px */
@media only screen and (max-width: 625px) {
	body {
		width: 90%;
		font-size: 95%;
	}
	
	.navigation {
		height: 200px;
        padding-right: 0;
	}
	
	.navigation ul {
		padding-left: 0;
	}
	
	.navigation ul li {
		width: 100%;
		text-align: center;
	}
	
	.navigation a:link, .navigation a:visited {
		padding: 10px 25px;
		height: 20px;
		display: block;
	}
    
    #login-form  {
        width: 86%;
        right: 5%;
    }
		
	.main-content {
		width: 100%;
	}
	
	.main-content article {
		margin-bottom: 2%;
	}
	
	.post-info {
		display: none;
	}
	
	.sidebar {
		width: 100%;
		margin-left: 0;
	}
	
	.sidebar article {
		padding: 2% 3%;
		margin-bottom: 2%;
	}
}

<!DOCTYPE html>
<html>
	<head>
		<title>iRock.no</title>
		
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/mobile.css" />
		<link rel="stylesheet" type="text/css" href="css/login.css" />
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<script src="script/login.js"></script>
		<!-- IE9 AND LESS HTML5 SUPPORT -->
		<!--[if lt IE 9]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>

	<body>
	
		<!-- HEADER -->
		<header class="main-header">
			<img alt="Header" src="img/hd-default_freemono.png">
		</header>
		
		
		<!-- NAVIGATION -->
		<nav class="navigation">
			<ul class="main-nav">
				<li class="active"><a href="#">Home</a></li>
				<li><a href="#">Workspace</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
			
			<ul class="ext-nav">
				<li id="login">
					<a  href="#" margin-right="40px">login</a>
					<form id="login-form" action="script/login.php" method="post">
			            <p><input class="text" type="text" name="username" placeholder="username" /></p>
			            <p><input class="text" type="password" name="password" placeholder="password" /></p>
			            <p><input class="submit" type="submit" value="submit" /></p>
					</form>
				</li>
				
			</ul>
		</nav>
		
		
		<!-- CONTENT -->
		<section class="main-content">
			<!-- TODO: program article generator -->
			<article>
				<header class="article-header">
					<h1><a href="#">First Article</a></h1>
				</header>
				
				<footer>
					<p class="post-info">by iRock</p>
				</footer>
				
				<content>
					<p>Lorem ipsum dolor sit amet, erant tempor fuisset ea nec. 
					Ius harum lobortis ex, paulo iuvaret argumentum his ex. 
					Vel ne vocibus menandri constituto. 
					Populo salutatus patrioque est in. 
					Id laoreet propriae consulatu mel. 
					Assum prodesset at eos, ius at tota dolorum adversarium. 
					Ad inani impetus impedit duo, an quo tempor laoreet.</p>

					<p>Tantas similique eum id, idque veniam duo ei, ei commodo honestatis pri. 
					Ei sit ignota possit, ex vidisse iracundia his. 
					Eu propriae salutandi est. 
					Pro possim tibique at, at usu simul lobortis. 
					Latine incorrupte disputationi ad vel, integre detracto ei qui. 
					Sit ut illud scripta scribentur, has fastidii invenire voluptatibus in.</p>
				</content>
			</article>
			
			<article>
				<header class="article-header">
					<h1><a href="#">Second Article</a></h1>
				</header>
				
				<footer>
					<p class="post-info">by iRock</p>
				</footer>
				
				<content>
					<p>Lorem ipsum dolor sit amet, erant tempor fuisset ea nec. 
					Ius harum lobortis ex, paulo iuvaret argumentum his ex. 
					Vel ne vocibus menandri constituto. 
					Populo salutatus patrioque est in. 
					Id laoreet propriae consulatu mel. 
					Assum prodesset at eos, ius at tota dolorum adversarium. 
					Ad inani impetus impedit duo, an quo tempor laoreet.</p>

					<p>Tantas similique eum id, idque veniam duo ei, ei commodo honestatis pri. 
					Ei sit ignota possit, ex vidisse iracundia his. 
					Eu propriae salutandi est. 
					Pro possim tibique at, at usu simul lobortis. 
					Latine incorrupte disputationi ad vel, integre detracto ei qui. 
					Sit ut illud scripta scribentur, has fastidii invenire voluptatibus in.</p>
				</content>
			</article>
			
		</section>
		
		
		<!-- SIDEBAR -->
		<aside class="sidebar">
			<article>
				<h1><a href="#">Sidebar Article 1</a></h1>
				<p>Lorem ipsum dolor sit amet, erant tempor fuisset ea nec. 
					Ius harum lobortis ex, paulo iuvaret argumentum his ex.</p>
			</article>
			
			<article>
				<h1><a href="#">Sidebar Article 2</a></h1>
				<p>Lorem ipsum dolor sit amet, erant tempor fuisset ea nec. 
					Ius harum lobortis ex, paulo iuvaret argumentum his ex.</p>
			</article>
			
			<article>
				<h1><a href="#">Sidebar Article 3</a></h1>
				<p>Lorem ipsum dolor sit amet, erant tempor fuisset ea nec. 
					Ius harum lobortis ex, paulo iuvaret argumentum his ex.</p>
			</article>
		</aside>
		
		
		<!-- FOOTER -->
		<footer class="main-footer">
			<p>Copyright &copy; Øystein Jacobsen</p>
		</footer>
	</body>
</html>

但它不适用于 server

如有任何帮助，我们将不胜感激。

最佳答案

您需要在$( document ).ready() 中运行您的代码，像这样:

$( document ).ready(function() {
    $("#login").hover(function() {
      $("#login-form").slideToggle();
    });
});

这将确保您的代码仅在文档对象模型 (DOM) 准备就绪后执行。

并记得添加 jQuery 库:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

关于javascript - 为什么 jquery hover 在 jsfiddle 中工作但在我的 html 布局中不工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29463453/

javascript - 为什么 jquery hover 在 jsfiddle 中工作但在我的 html 布局中不工作？

上一篇：html - 如何强制分隔线的位置，并将 Logo 放置在特定位置？

下一篇：css - 如何使用 gulp-live 服务器连接 server.notify 和 ['sass' ]？