0
虽然在StackOverflow中我的问题都没有回答，但我仍然在这里提出问题，导致它成为我唯一的来源。当悬停在其子元素上时，如何保持父元素的背景颜色不变？
我正在使用引导程序3.我有一个导航栏和3个下拉框。我想要这个： 当用户将鼠标悬停在下拉菜单的父级上时，应打开下拉菜单（我的代码在此处运行），当用户将鼠标悬停在下拉菜单中的某个项目上时，父级的背景颜色不会更改（此是我的问题）。我的问题是当用户将鼠标悬停在子元素上时，父级的背景颜色意外更改。我已经检查了我所有的课程和我的代码。我完全不知道这个颜色变化来自哪里。我写了一些jQuery来改变父级的背景颜色，当它的孩子被徘徊但它不起作用。此jQuery适用于其他属性，如text-decoration，但不适用于background-color和color。这真的很奇怪。这是我的代码...你能告诉我这个背景颜色变化来自哪里？
我的HTML：`
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<title>صفحه اصلی</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.2.0-rc2/css/bootstrap-rtl.css">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript">
$(document).ready(function(){
$(".dropdown, .btn-group").hover(function(){
var dropdownMenu = $(this).children(".dropdown-menu");
if(dropdownMenu.is(":visible")){
dropdownMenu.parent().toggleClass("open");
}
});
$('ul li a').hover(function(){
$(this).parent().closest(".navbar-nav > .dropdown").toggleClass("divine");
});
});
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#navbar1" aria-expanded="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav">
<li><a href="#"><img src="images/logo.png"></a></li>
<li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"><b class="caret"></b>با تیام</a>
<ul class="dropdown-menu">
<li><a href="#">سخنان مدیرعامل</a></li>
<li><a href="#">درباره تیام</a></li>
<li><a href="#">تماس با تیام</a></li>
</ul>
</li>
<li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"><b class="caret"></b>خدمات و تعرفه ها</a>
<ul class="dropdown-menu">
<li><a href="#">پهنای باند اختصاصی</a></li>
<li><a href="#">اینترنت بی سیم</a></li>
<li><a href="#">تلفن ثابت مبتنی بر IP</a></li>
<li><a href="#">خدمات ADSL2+</a></li>
<li><a href="#">ارتباط بی سیم</a></li>
<li><a href="">تعرفه ها</a></li>
</ul>
</li>
<li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"><b class="caret"></b>پشتیبانی</a>
<ul class="dropdown-menu">
<li><a href="#">پشتیبانی آنلاین</a></li>
<li><a href="#">ارسال تیکت</a></li>
<li><a href="#">پشتیبانی 24 ساعته</a></li>
</ul>
</li>
<li><a href="http://voipsara.com">محصولات VoIP</a></li>
<li><a href="http://voipsara.com/fa/information/bank">پرداخت سریع وجه</a></li>
<li><a href="http://ispcrm.net/panel/#/app/login">شارژ آنلاین</a></li>
<li><a href="#">تماس با ما</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
和我的CSS：
`/* CSS Document */
@font-face {
font-family: 'yekan';
src: url('fonts/Yekan.eot');
src: url('fonts/Yekan.eot?#iefix') format('embedded-opentype'), url('fonts/Yekan.woff') format('woff'), url('fonts/Yekan.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.open {
background-color: none !important;
color: none !important;
}
.divine {
color: black !important;
}
body {
font-family: 'yekan';
}
.navbar {
background-color: #1F6B1F;
margin-bottom: 0;
z-index: 9999;
border: 0;
font-size: 20px !important;
line-height: 1.42857143 !important;
border-radius: 0px;
}
.jumbotron {
background-color: #1F6B1F;
color: white;
}
.logo {
font-size: 200px;
color: #451f6b;
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
}
.heading {
margin-top: 60px;
text-transform: uppercase;
font-size: 40px;
margin-bottom: 60px;
}
.b1, .b2, .b3, .b4 {
height: 200px;
margin-bottom: 40px;
}
.bs-example {
margin: 20px;
}
@media screen and (min-width: 768px) {
.dropdown:hover .dropdown-menu, .btn-group:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
margin-top: 0;
}
.dropdown-toggle {
margin-bottom: 0px;
}
.navbar .dropdown-toggle, .nav-tabs .dropdown-toggle {
margin-bottom: 0;
}
}
.dropdown-menu {
background-color: #1F6B1F;
}
.caret {
margin-left: 5px !important;
}
ul li a {
color: white !important;
font-size: 20px;
}
ul li a:hover {
background-color: #fdb316 !important;
}
你可以看到jQuery的我已经写在最后script标签中header。如果你能回答我，我会很感激。
生病请现在看看，让我看看我能不能找出你的问题 – Keith