我有一个下拉菜单。它由3个按钮组成,因此只有主按钮可见。当您将鼠标悬停在说莱佛士的主要按钮上时,它会使按钮向上移动。然后其他3个按钮中的1个向下移动,最后一个按钮保持不动。这会创建一个紧凑的下拉菜单。除了1个问题,它完美的工作。我把它设置为当你把每一个悬停时,它将把它们转移到需要的位置上。问题是,当我开始将鼠标悬停在不同的按钮上时(它们已经移动之后),它们都开始再次移动,因为我停止在1个按钮上方悬停,并开始将鼠标悬停在下一个按钮上。我怎样才能防止这种情况发生?下拉菜单javascript函数
var dropdown = function() {
$('.inbutton, .dr1button, dr2button').hover(function() {
$('.inbutton').animate({
top: '-183px'
}, 200);
$('.dr2button').animate({
top: '0px'
}, 200);
}, function() {
$('.inbutton').animate({
top: '-122px'
}, 200);
$('.dr2button').animate({
top: '-61px'
}, 200);
});
};
$(document).ready(dropdown);
p.button {
padding: 0px 13px 0px 13px;
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
text-align: center;
line-height: 61px;
border-bottom: 1px solid #1C1C1C;
box-sizing: border-box;
height: 100%;
transition: height 0.2s ease;
}
p.button:hover {
height: 110%;
border-bottom: 0px;
cursor: pointer;
}
p.dbutton {
padding: 0px 13px 0px 13px;
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
vertical-align: middle;
line-height: 30.5px;
text-align: center;
border-bottom: 1px solid #1C1C1C;
box-sizing: border-box;
height: 100%;
transition: height 0.2s ease;
}
p.dbutton:hover {
height: 110%;
border-bottom: 0px;
cursor: pointer;
}
p.inbutton {
padding: 0px 13px 0px 13px;
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
text-align: center;
line-height: 61px;
border-bottom: 1px solid #1C1C1C;
box-sizing: border-box;
height: 100%;
position: relative;
top: -122px;
z-index: 98;
}
p.inbutton:hover {
border-bottom: 0px;
cursor: pointer;
}
p.dr1button {
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
text-align: center;
line-height: 61px;
height: 100%;
width: 144px;
position: relative;
z-index: 97;
transition: background-color 0.2s ease;
}
p.dr1button:hover {
background-color: #585858;
cursor: pointer;
}
p.dr2button {
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
text-align: center;
line-height: 61px;
height: 100%;
width: 144px;
position: relative;
top: -61px;
z-index: 98;
transition: background-color 0.2s ease;
}
p.dr2button:hover {
background-color: #585858;
cursor: pointer;
}
div.navbardivider {
height: 61px;
width: 1px;
background-color: #424242;
border-bottom: 1px solid #1C1C1C;
box-sizing: border-box;
float: left;
}
div.dropdown {
width: 144px;
float: left;
}
div.divider:hover {
cursor: pointer;
<div id="buttons">
<!--Home button-->
<a href="/"><p class="button">- Home</p></a>
<!--Divider-->
<div class="navbardivider"></div>
<!--Raffles Button-->
<div class="dropdown">
<a href="/raffles.php">
<p class="dr1button">Open</p>
</a>
<a href="/clraffles.php">
<p class="dr2button">Closed</p>
</a>
<p class="inbutton">Raffles</p>
</div>
<!--Divider-->
<div class="navbardivider"></div>
<!--Get tokens Button-->
<a href="/gettokens.php"><p class="dbutton">Get<br>Tokens</p></a>
<!--Divider-->
<div class="navbardivider"></div>
<!--Token lotto Button-->
<a href="/lotto.php"><p class="dbutton">Token<br>Lotto</p></a>
</div>
请发布完整的代码示例,包括HTML和CSS。 – j08691
@ j08691它已被编辑 – Lion
不能在代码段中工作。 –