如果我的悬停光标不在元素中,我会遇到颜色变回白色的问题。如果悬停光标不在悬停元素中,是否有办法使导航链接颜色保持不变?我将向大家展示我今天的输出图像。目前,我的导航栏使用引导程序。
光标不在元素中
我想使目标输出看起来像这样。
我将与大家分享我的小提琴文件,以了解更多详细信息。
.dropdown:hover {
background-color: #f3f3f3;
border-top:5px solid #00BC54;
color:black !important;
}
.dropdown a:hover {
color:grey !important;
}
.nav-item:hover a {
/*color:gray !important;*/
}
#navbarDropdown:hover {
color:grey !important;
}
#navbarDropdown:focus {
color:grey !important;
}
.navbar {
padding-top:0px;
padding-bottom:0px;
}
.nav-item {
/* padding-top:5px;
padding-bottom:8px;
margin-right:50px;*/
padding-top:10px;
margin-right:60px;
padding-bottom:8px;
}
.nav-item #navbarDropdown {
font-size:13px;
font-weight: 500;
letter-spacing: 1px;
color:#F9F9F9;
}
li.nav-item:hover div.dropdown-menu,
div.dropdown-menu:hover {
display: block;
opacity: 1;
position: absolute;
z-index: 100000;
}
.nav-item #navbarDropdown:hover {
color:#575a5d !important;
}
.nav-item #navbarDropdown:not(:hover) {
color:white;
}
.navbar-expand-sm .navbar-nav .nav-link {
font-weight:400;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-light bg-dark custom-navbar-fixed" style="min-height: 56px; background-color:#575a5d !important; border-color:#575a5d !important; position:fixed; width: 100%; z-index:3;">
<br><br>
<button class="custom-toggler navbar-toggler" type="button" data-toggle="collapse" style="color:white !important;" data-target=".navbar1and2" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" style="color:white !important;"></span>
</button>
<div class="collapse navbar-collapse navbar1and2" id="navbarSupportedContent2">
<ul class="navbar-nav mr-auto" >
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MEMBERSHIP
</a>
<div class="dropdown-menu fade w-100" aria-labelledby="navbarDropdown" style="border-radius: 0px; height:400px; background-color:#F9F9F9; box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1); border-color:white; position: absolute; top:50px;">
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:20px;">
<p style="font-size:17px; color:#8e908f">Benefits For</p>
<div style="border-right-style: dotted; height:auto; "></div>
<a href="./physician_membership.php" class="btn btn-primary btn-lg form-control" style="border-radius: 50px; text-align: left; border-color:#00A0DF; background-color:#00A0DF; font-size:16.5px !important; "><i class="fas fa-arrow-alt-circle-right"></i> Physician</a>
<br><br>
<a href="./residents.php" class="btn btn-primary btn-lg form-control" style="border-radius: 50px; text-align: left; border-color:#00A0DF; background-color:#00A0DF; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Residents & Fellows-in-Training</a>
<br><br>
<a href="./medical_students.php" class="btn btn-primary btn-lg form-control" style="border-radius: 50px; text-align: left;border-radius: border-color:#00A0DF; background-color:#00A0DF; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Medical Students</a>
<br><br>
<a href="./international_membership.php" class="btn btn-primary btn-lg form-control" style="border-color:#4AAE9C; background-color:#4AAE9C; border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> International</a>
<br><br>
<a href="./affiliate_membership.php" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Affiliate</a>
</div>
<div class="col-md-4" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:20px;">
<p style="font-size:17px; color:#8e908f">Become a Fellow</p>
<ul style="list-style-type: circle; ">
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Interested in becoming fellow?</a></li><br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Nominate a fellow <i class="fas fa-location-arrow"></i></a></li>
</ul>
</div>
<div class="col-md-4" style=" position: relative; top:20px;">
<p style="font-size:17px; color:#8e908f">For Members</p>
<ul style="list-style-type: none;">
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="far fa-gem"></i> Pay Dues <i class="fas fa-location-arrow"></i></a></li>
<br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="fas fa-th-list"></i> Update Account <i class="fas fa-location-arrow"></i></a></li>
<br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="fas fa-money-check"></i> Check Orders <i class="fas fa-location-arrow"></i></a></li>
</ul>
</div>
</div>
</div>
<br><br>
</div>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CME & MOC
</a>
<div class="dropdown-menu fade w-100 cme" aria-labelledby="navbarDropdown" style="border-radius: 0px; height:400px; background-color:#F9F9F9; border-color:white; position:absolute; top:50px;">
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<p style="font-size:17px; color:#8e908f">UNDERSTANDING MOC</p>
<p>PSMID offers a number of resources to help members make sense of the MOC requirements and earn points.</p>
<a href="" class="btn btn-primary btn-lg form-control" style="border-color:#007BFF; background-color:#007BFF; border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Understand MOC Requirements</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#007BFF; background-color:#007BFF;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Earn MOC Points</a>
</div>
<div class="col-md-4" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<p style="font-size:30px; color:#000">Industry Leading Tools & Resources</p>
<ul style="list-style-type: none; ">
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"> MKSAP 18</a></li><br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><img src="./Assets/annals_icon.png" class="img-fluid"> Annals of IM </a></li>
<br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><img src="./Assets/im2020-57x57.png" class="img-fluid"> Internal Medicine Meeting </a></li>
</ul>
</div>
<div class="col-md-4" style=" position: relative; top:0px;">
<br>
<div style="background-color:#E9ECEF; padding: 10px 10px 10px 10px;">
<p style="font-size:25px;">In this section</p>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">CME</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">MOC</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Certification Preperation</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Online Learning Center</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MEETING & COURCES
</a>
<div class="dropdown-menu fade w-100" aria-labelledby="navbarDropdown" style="border-radius: 0px; height:400px; background-color:#F9F9F9; border-color:white; position:absolute; top:50px;">
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><img src="./Assets/im2020-logo-350x115.png" class="img-fluid">
<br><br>
<p style="font-size:18px; color:#8e908f;">The most comprehensive meeting in Internal Medicine.</p>
<hr>
<p style="font-size:27px; color:#8e908f;">Los Angeles,CA April 23-25, 2020</p>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:15px !important;"><i class="fas fa-arrow-alt-circle-right"></i> INTERNAL MEDICINE MEETING 2020</a>
</div>
<div class="col-md-4" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<p style="font-size:30px; color:#000">Upcoming Internal Medicine Board Review Courses</p>
<p style="font-size:20px; color:#8e908f">Prepare for the Certification and Maintenance of Certification (MOC) Exam with an PSMID review course.</p>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:15px !important;"><i class="fas fa-arrow-alt-circle-right"></i> BOARD CERTIFICATION REVIEW COURCES</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:15px !important;"><i class="fas fa-arrow-alt-circle-right"></i> MOC EXAM PREP COURCES</a>
</div>
<div class="col-md-4" style=" position: relative; top:0px;">
<div style="background-color:#E9ECEF; padding: 10px 10px 10px 10px;">
<p style="font-size:25px;">In this section</p>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Internal Medicine Meeting</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">US Chapter Meetings</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">International Chapter Meetings</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Courses & Recordings</a>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Focused Topics</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CLINICAL INFORMATION
</a>
<div class="dropdown-menu fade w-100" aria-labelledby="navbarDropdown" style="border-radius: 0px; height:400px; background-color:#F9F9F9; border-color:white; position:absolute; top:50px;">
<div class="container-fluid">
<div class="row">
<div class="col-md-8" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<center>
<br>
<div style="line-height: 5px;">
<p style="font-size:30px;">PSMID Clinical Search</p>
<h5 style="font-size:20px;">Treating a patient? Researching a topic? Get answers now.</h5>
<div class="input-group col-md-7">
<input type="text" class="form-control" style="position: relative; top:7px; font-size: 15px; " placeholder="Search Clinical Information" aria-label="Username" aria-describedby="basic-addon1">
<div class="input-group-prepend" style="position: relative; top:7px; ">
<span class="input-group-text" id="basic-addon1" style="background-color: #00A0DF !important; border-color:#00A0DF; color:white; "><i class="fas fa-search" style="font-size:15px;"></i></span>
</div>
</div>
<br><br>
<hr>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img src="./Assets/logo-annals3.png" class="img-fluid">
<br><br><br><br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16px !important;"><i class="fas fa-arrow-alt-circle-right"></i> VISIT ANNALS</a>
<br><br><br><br>
<a href="" style="font-size:15px; text-decoration: none; color:#00A0DF;">LEARN MORE</a>
</div>
<div class="col-md-4">
<img src="./Assets/logo-annals3.png" class="img-fluid">
<br><br><br><br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16px !important;"><i class="fas fa-arrow-alt-circle-right"></i> VISIT MKSAP 18</a>
<br><br><br><br>
<a href="" style="font-size:15px; text-decoration: none; color:#00A0DF;">LEARN MORE</a>
</div>
<div class="col-md-4">
<img src="./Assets/dmp_logo_v3.png" class="img-fluid">
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16px !important;"><i class="fas fa-arrow-alt-circle-right"></i> VISIT DYNAMED PLUS</a>
</div>
</div>
</div>
</div>
</center>
</div>
<div class="col-md-4" style=" position: relative; top:0px;">
<div style="background-color:#E9ECEF; padding: 10px 10px 10px 10px;">
<p style="font-size:25px;">In this section</p>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Clinical Guidelines & Recommendations</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Performance Measures</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Journals & Publications</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Clinical Resources & Products</a>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">High Value Care</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Ethics & Professionalism</a>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- <li class="nav-item " style="padding-right:60px; color:white;">
<a class="nav-link" href="#" >CLINICAL INFORMATION</a>
</li> -->
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
PRACTICE RESOURCES
</a>
<div class="dropdown-menu fade w-100" aria-labelledby="navbarDropdown" style="border-radius: 0px; height:400px; background-color:#F9F9F9; border-color:white; position:absolute; top:50px;">
<div class="container-fluid">
<div class="row">
<div class="col-md-3" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<p style="font-size:25px; color:#8e908f">Medicare</p>
<p style="font-size:18px;">Ensure payment and avoid policy violations. Plus, new resources to help you navigate the Medicare Access and CHIP Reauthorization Act of 2015 (MACRA).</p>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Medicare Resources</a>
</div>
<div class="col-md-3" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<p style="font-size:25px; color:#8e908f">Office Forms</p>
<p style="font-size:18px;">Access helpful forms developed by a variety of sources for patient charts, logs, information sheets, office signs, and use by practice administration.</p>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Office Forms</a>
</div>
<div class="col-md-6" style=" position: relative; top:10px;">
<div class="row">
<div class="col-md-6">
<p style="font-size:17px; color:#8e908f">QUICK LINKS</p>
<ul style="list-style-type: none;">
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="fas fa-arrow-alt-circle-right"></i> QPP/MACRA </a></li>
<br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="fas fa-arrow-alt-circle-right"></i>Physician & Practice Timeline </a></li>
<br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="fas fa-arrow-alt-circle-right"></i> Coding</a></li>
<br>
<li><a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;"><i class="fas fa-arrow-alt-circle-right"></i> Medical Educator Resources</a></li>
</ul>
</div>
<div class="col-md-6">
<div style="background-color:#E9ECEF; padding: 10px 10px 10px 10px;">
<p style="font-size:25px;">In this section</p>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">CME</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">MOC</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Certification Preperation</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Online Learning Center</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ADVOCACY
</a>
<div class="dropdown-menu fade w-100" aria-labelledby="navbarDropdown" style="border-radius: 0px; height:400; background-color:#F9F9F9; border-color:white; position:absolute; top:50px;">
<div class="container-fluid">
<div class="row">
<div class="col-md-8" style="border-right-style: dotted; border-right-color: #8e908f; position: relative; top:10px;">
<br>
<div style="line-height: 5px;">
<p style="font-size:30px;">Where We Stand</p>
<h5 style="font-size:20px;">PSMID advocates on behalf on internists and their patients on a number of timely issues. Learn about where PSMID stands on the following areas:</h5>
</div>
<br>
<div class="row">
<div class="col-md-6">
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Access to Care</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Patients Before Paperwork</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Medicare and the Quality Payment Program</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Medicaid Reform</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Public Health</a>
</div>
<div class="col-md-6">
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Physician Workforce and Team Based Care</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Women in Medicine</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Health Information Technology</a>
<br><br>
<a href="" class="btn btn-primary btn-lg form-control" style=" border-color:#4AAE9C; background-color:#4AAE9C;border-radius: 50px; text-align: left; font-size:16.5px !important;"><i class="fas fa-arrow-alt-circle-right"></i> Medical Liability Reform</a>
</div>
</div>
<br>
</div>
<div class="col-md-4" style=" position: relative; top:0px;">
<div style="background-color:#E9ECEF; padding: 10px 10px 10px 10px;">
<p style="font-size:25px;">In this section</p>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Where We Stand</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">PSMID Advocate Newsletter</a> <br><br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">State Health Policy</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Advocacy in Action</a>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">Current Public Policy Papers</a> <br> <br>
<a href="" style="font-size:20px; text-decoration: none; color:#00A0DF;">PSMID Policies & Recommendations</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item " >
<a class="nav-link" href="#" style="color:white !important;"><i class="fas fa-shopping-cart"></i> STORE</a>
</li>
</ul>
</div>
</nav>
答案 0 :(得分:2)
尝试使用此选择器:
.dropdown:hover > a {
color: #575a5d !important;
}
并摆脱a标记的悬停样式。
由于下拉菜单不是标签的子菜单,因此,一旦向下移动鼠标,您就停止在标签上徘徊。
相反,由于下拉菜单是.dropdown li的子级,因此,只要您将鼠标悬停在.dropdown元素或其任何子级中,就可以将标签定位为目标。