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

【问题标题】：how can I keep parent element's background-color unchanged when hover on its child element?将鼠标悬停在其子元素上时，如何保持父元素的背景颜色不变？
【发布时间】：2017-08-06 15:25:07
【问题描述】：

虽然我在 StackOverflow 中的问题都没有得到解答，但我仍然在这里提出问题，因为它是我唯一的来源。

我正在使用 bootstrap 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。如果您能回答我，我将不胜感激。

【问题讨论】：

我先看看，看看能不能解决你的问题

标签： jquery html css twitter-bootstrap-3 drop-down-menu

【解决方案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;
}

【讨论】：

【解决方案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");
});

希望我回答了你的问题。

【讨论】：

非常感谢亲爱的基思。它对我来说就像一个魅力:)))。但我有一个问题：当我没有悬停在父母身上时，你怎么知道它会恢复到那个背景颜色？你从哪里找到这条规则的？？？
如果您在开发人员工具中查看我的小提琴，请右键单击任何下拉菜单，您将看到 css。然后将鼠标悬停在下面的孩子上，您将看到 css 发生变化