我正在尝试将#web悬停在＃webdsn-drop div上。我正在使用.slideToggle jQuery，但是当我将其滚动/悬停或单击时，什么也没有。我不确定香港专业教育学院哪里出了错。我还希望网站以隐藏的webdsn-drop开始。
HTML是：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="navbar">
<div id="nav-container">
<h1>PORTFOLIO</h1>
<a href="#">Logo Design</a>
<a href="#">Business Cards</a>
<a href="posters+flyers.html">Posters & Flyers</a>
<a id="web" href="#">Website Design</a>
</div>
</div>
<div id="webdsn-drop">
<div id="border">
<h1>WEBSITE DESIGN</h1>
</div>
</div>
</body>
</html>
CSS是：
body {
background-color: #383838;
}
/*--------------Navigation Bar------------*/
#navbar {
width: 100%;
background-color: #fcfcfc;
overflow: auto;
position: fixed;
left: 0px;
top: 0px;
overflow: hidden;
z-index: 10;
}
#nav-container {
max-width: 950px;
min-width: 745px;
margin: 0 auto;
}
#nav-container h1 {
float: left;
margin: 0 auto;
padding-top: 10px;
font-family: "calibri light";
font-size: 25px;
letter-spacing: 0.3em;
margin-left: 5px;
transition: color 0.3s ease;
}
#nav-container a {
float: right;
display: block;
padding: 15px 15px;
text-decoration: none;
color: black;
font-family: "calibri light", sans-serif;
font-size: 18px;
transition: background-color 0.5s ease;
}
#nav-container a:hover {
background-color: #f4f4f4;
transition: background-color 0.5s ease;
}
#nav-container a:active {
background-color: #bfbfbf;
}
#nav-container h1:hover {
color: #aaaaaa;
transition: color 0.3s ease;
}
#border{
width: 950px;
margin: 0 auto;
}
#border h1{
position: absolute;
border: solid;
border-color: white;
border-width: 1px;
display: inline;
padding: 10px 20px;
border-radius: 10px;
}
#webdsn-drop{
background-color: #3f3f3f;
margin-top: 50px;
width: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: 9;
font-family: 'calibri light';
font-size: 12px;
letter-spacing: 5px;
height: 400px;
color: white;
}
我的jQuery是：
$(document).ready(function(){
$('#web').hover(function() {
$('#webdsn-drop').slideDown();
}, function() {
$('#webdsn-drop').slideUp();
});
});
最佳答案
以#webdsn-drop开头display:none，因此在您首次加载页面时将其隐藏：
<div id="webdsn-drop" style="display:none">
<div id="border">
<h1>WEBSITE DESIGN</h1>
</div>
</div>
然后，由于您正在使用鼠标悬停，因此建议您在使用鼠标悬停和取消悬停时明确使用
slideDown和slideUp显示和隐藏div：$('#web').hover(function() {
$('#webdsn-drop').slideDown();
}, function() {
$('#webdsn-drop').slideUp();
});
工作提琴：https://jsfiddle.net/n0qne6gx/1/
（抱歉，堆栈溢出代码段目前似乎已损坏，因此我无法内联共享工作代码。）