当将鼠标悬停在其子元素上时，如何保持父元素的背景颜色不变？

Question

尽管我在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;
}

您可以在header中的最后一个script标记中看到我编写的jQuery。 如果您能回答我，我将非常感激。

Answer 1

像这样？ https://jsfiddle.net/v8o3zL6y/

从您的js中取出

$('ul li a').hover(function(){
    $(this).parent().closest(".navbar-nav > .dropdown").toggleClass("divine");
});

并将其添加到您的CSS

.dropdown.open > a{
    background-color: #fdb316 !important;
}

Answer 2

https://jsfiddle.net/wx5jxd6s/2/

你的问题是你有

ul li a:hover {
    background-color: #fdb316 !important;
}

但是当您不悬停时，它会还原为：

.navbar-default .navbar-nav > .open > a {
    color: rgb(85,85,85);
    background-color: rgb(231,231,231);
}

因此，只需添加以下内容即可：

li.open > a {
      background-color: #fdb316 !important;
}

而且看起来您正在尝试在悬停时打开导航，因此您的jQuery应该是：

$("li.dropdown").hover(function(){
    $(this).toggleClass('open');
});
$('ul li a').hover(function(){
    $(this).parent().closest(".navbar-nav > .dropdown").toggleClass("divine");
});

希望我回答了你的问题。