当鼠标离开触发器并向下滑动内容时,如何将向下滑动的内容编码为向上滑动?
How can I code the slid down content to slideup when mouse is off the trigger and slid down content?
我已经让 webdsn-drop 在鼠标离开这个 div 时向上滑动,但当鼠标离开#web 按钮时它仍然保持向上。当鼠标同时关闭#web 按钮和#webdsn-drop
时,如何使 div 消失
感谢大家的帮助!
HTML:
<div id="navbar">
<div id="nav-container">
<h1>PORTFOLIO</h1>
<a href="#">Logo Design</a>
<a href="#">Business Cards</a>
<a id="pf" 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>
<div id="pfdsn-drop">
<div id="border">
<h1>POSTERS & FLYERS</h1>
</div>
</div>
CSS:
#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;
}
/*-----------WEB-DESIGN-DROP---------*/
#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;
display: none;
}
JQUERY:
$(document).ready(function(){
$('#web').hover(function() {
$('#webdsn-drop').slideDown();
}, function() {
$('#webdsn-drop').mouseleave(function(){
$('#webdsn-drop').slideUp();
});
});
});
在我看来,您正试图在事件已经触发时添加一个 mouseleave 侦听器。
试试这个:
$(document).ready(function(){
$('#web').hover(function() {
$('#webdsn-drop').slideDown();
}, function() {
$('#webdsn-drop').slideUp();
});
});
试一试
我添加了行 $('#web').Hover() 为了不会有多次悬停重复打开
$(document).ready(function () {
$('#web').hover(function () {
if ($('#webdsn-drop').is(":hidden")) {
$('#webdsn-drop').slideDown();
}
}, function () {
$('#webdsn-drop').slideUp();
});
我坐了很久想怎么实现,虽然结果很歪,但是我完全确定有更好的实现
$(document).ready(function () {
let StatusHower = false;
$('#web').hover(function () {
if ($('#webdsn-drop').is(":hidden")) {
$('#webdsn-drop').slideDown();
}
}, function () {
StatusHower = true;
$('#webdsn-drop').hover(function () {
StatusHower = false;
}, function () {
$('#webdsn-drop').slideUp();
});
setTimeout(function () {
if (StatusHower) {
$('#webdsn-drop').slideUp();
StatusHower = !StatusHower;
}
},100)
});
});
我已经让 webdsn-drop 在鼠标离开这个 div 时向上滑动,但当鼠标离开#web 按钮时它仍然保持向上。当鼠标同时关闭#web 按钮和#webdsn-drop
时,如何使 div 消失感谢大家的帮助!
HTML:
<div id="navbar">
<div id="nav-container">
<h1>PORTFOLIO</h1>
<a href="#">Logo Design</a>
<a href="#">Business Cards</a>
<a id="pf" 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>
<div id="pfdsn-drop">
<div id="border">
<h1>POSTERS & FLYERS</h1>
</div>
</div>
CSS:
#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;
}
/*-----------WEB-DESIGN-DROP---------*/
#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;
display: none;
}
JQUERY:
$(document).ready(function(){
$('#web').hover(function() {
$('#webdsn-drop').slideDown();
}, function() {
$('#webdsn-drop').mouseleave(function(){
$('#webdsn-drop').slideUp();
});
});
});
在我看来,您正试图在事件已经触发时添加一个 mouseleave 侦听器。
试试这个:
$(document).ready(function(){
$('#web').hover(function() {
$('#webdsn-drop').slideDown();
}, function() {
$('#webdsn-drop').slideUp();
});
});
试一试
我添加了行 $('#web').Hover() 为了不会有多次悬停重复打开
$(document).ready(function () {
$('#web').hover(function () {
if ($('#webdsn-drop').is(":hidden")) {
$('#webdsn-drop').slideDown();
}
}, function () {
$('#webdsn-drop').slideUp();
});
我坐了很久想怎么实现,虽然结果很歪,但是我完全确定有更好的实现
$(document).ready(function () {
let StatusHower = false;
$('#web').hover(function () {
if ($('#webdsn-drop').is(":hidden")) {
$('#webdsn-drop').slideDown();
}
}, function () {
StatusHower = true;
$('#webdsn-drop').hover(function () {
StatusHower = false;
}, function () {
$('#webdsn-drop').slideUp();
});
setTimeout(function () {
if (StatusHower) {
$('#webdsn-drop').slideUp();
StatusHower = !StatusHower;
}
},100)
});
});