我试图让#webdsn-drop div 在#web 悬停时出现。我正在使用 .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();
});
});
最佳答案
使用 display:none 启动 #webdsn-drop 以便在您首次加载页面时隐藏它:
<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();
});
工作 fiddle :https://jsfiddle.net/n0qne6gx/1/
(抱歉，Stack Overflow 片段目前似乎已损坏，因此我无法在线共享工作代码。)
关于jQuery .slideToggle 不产生屏幕变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44815001/