【发布时间】：2021-05-15 15:36:07
【问题描述】：
我创建了一个自定义引导导航按钮。
当用户将鼠标悬停在按钮上时，按钮颜色会从绿色变为蓝色，并且会下拉一个子菜单。
然后用户可以单击子菜单项导航到所需的页面。
当用户将鼠标从主按钮移到子菜单上时，主按钮颜色变回绿色。
当用户将鼠标移动到子菜单时，我们希望主按钮保持蓝色。
这是当前使用的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Login Button Mouseover</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
.btn {
border-radius: 0rem;
}
.btn-secondary {
background-color: #55aa39;
}
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show>.btn-secondary.dropdown-toggle {
color: #fff;
background-color: #55aa39; /* GREEN */
border-color: #4e555b;
font-weight: bold;
}
/* set the background color on hover, focus, active */
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
background-color: #223f8e !important;
}
.dropdown-item a {
margin-left: 10px;
margin-right: 10px;
width: 90%;
margin: auto;
}
.dropdown-menu{
margin-top: 0;
display: hide; /* toggle between hide or block to hide or show for dev */
min-width: 12rem;
}
.dropdown:hover .dropdown-menu{
display: block;
}
.dropdown-item.active, .dropdown-item:active {
color: #fff;
background-color: #007bff;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #fff;
background-color: #55aa39;
border-style: solid;
border-color: #000000;
border-width: 1px;
}
/* STYLE THE CARET - DOWN POINTING TRIANGLE */
.dropdown-toggle::after {
display: inline-block; /* Default */
width: 0; /* Default */
height: 0; /* Default */
margin-left: .3em; /* Default */
vertical-align: middle; /* Default */
content: ""; /* Default */
border-top: .5em solid; /* caret size */
border-right: .5em solid transparent; /* caret size */
border-left: .5em solid transparent; /* caret size */
}
.mycustom {
margin-left: 5px;
margin-right: 7px;
width: 95%;
text-align: center;
margin: auto;
min-height: 35px;
}
</style>
<script>
$(document).ready(function(){
$(".dropdown").hover(function(){
var dropdownMenu = $(this).children(".dropdown-menu");
if(dropdownMenu.is(":visible")){
dropdownMenu.parent().toggleClass("open");
}
});
});
</script>
</head>
<body>
<p> </p>
<div class="dropdown show" style="margin: auto; text-align: center; width: 100px;">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Login
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item mycustom" href="#">User Access</a>
<a class="dropdown-item mycustom" href="#">Business Access</a>
<a class="dropdown-item mycustom" href="#">Employee</a>
</div>
</div>
</body>
</html>
感谢您的帮助！
【问题讨论】：
-
嗨@Wordpress-Pros.com，如果确实解决了您的问题，请标记答案已接受。
标签： css twitter-bootstrap