作者：Yatmiiml | 来源：互联网 | 2022-12-09 12:46
我有一个按钮的问题,该按钮用作导航栏,单击该按钮可切换下拉菜单.我现在希望当我在下拉菜单中导航或完全离开下拉菜单时按钮悬停效果保持不变,直到我再次关闭下拉菜单.
我查看了这件事的所有信息,但似乎没有工作,你的帮助将不胜感激.
$(document).ready(function() {
$(document).on("click", function(event) {
var $trigger = $(".dropdown");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$("#myDropdown").slideUp("slow");
}
});
$("#dropdown-content").change(function() {
$(".one").hide();
});
});
.dropdown {
width: 60px;
height: 120px;
top: 20px;
left: 40px;
position: relative;
display: inline-block;
}
.dropbtn div {
height: 8px;
background-color: #808080;
margin: 8px 0;
border-radius: 25px;
position: relative;
z-index: 20;
}
.dropbtn {
border: none;
background-color: #fff;
cursor: pointer;
}
.one {
width: 8px;
transition: 0.7s;
}
.two {
width: 8px;
transition: 0.9s;
}
.three {
width: 8px;
transition: 1.1s;
}
.dropbtn:hover .one {
width: 60px;
}
.dropbtn:hover .two {
width: 60px;
}
.dropbtn:hover .three {
width: 60px;
}
.dropbtn:focus {
outline: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd
}
京公网安备 11010802041100号