为什么jquery悬停在jsfiddle中可以工作，而在我的html布局中却不能
Why is jquery hover working in jsfiddle but not in my html layout?
我正在制作一个带有下拉登录框的网页。当鼠标使用jquery悬停在导航菜单中的列表项上时，登录框应该向下滑动。
登录表单隐藏在css中，显示：none，直到鼠标悬停在登录链接上。
这在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 © Øystein Jacobsen</p>
</footer>
</body>
</html>但它在服务器上不起作用
如有任何帮助，我们将不胜感激。
您需要在$( 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>
相关文章：
- 可以't让我的if语句处理js中的html表单输入
- 无法将数据从firebase获取到我的html页面
- 我的HTML按钮没有在Javascript中运行
- 如果使用javascript函数屏幕太小，我该如何更改HTML文件的背景色
- 我的html有一些错误
- 为什么jquery悬停在jsfiddle中可以工作，而在我的html布局中却不能
- 为什么我的短信没有弹出?CSS，HTML
- 为什么<p>没有插入到我的html中
- 如何在我的html网页中使用jquery自动完成
- <text区域>在我的html中包含event.keycode==13之后，wrap就不起作用了
- 我的html表单无法验证.请参阅代码片段中的html代码和java脚本
- 如何重定向到我的html网站youtube嵌入视频打开在youtube应用程序
- 为什么我的html页面没有在<ui视图>
- 在将javascript附加到我的html中时遇到问题
- 当按下箭头键时，我的图像以一种奇怪的方式跳跃(HTML+JS）
- 如何在HTML表单中提交我的下拉选择
- 我制作html网站的一小部分——我有一个javascript部分
- 为什么我得到的是返回的[object HTML ParagraphElement]而不是我的号码
- Javascript崩溃HTML -我的代码不工作，你能看到任何错误吗?
- 对象 HTML 我的第一个代码中的错误
