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