Question

虽然StackOverflow中的任何问题都没有得到解答，但我仍然在这里提出问题，这是我唯一的问题。

我使用bootstrap 3.我有一个导航栏和3个下拉菜单。我要这个：当用户将鼠标悬停在下拉列表的父级上时，下拉列表应该打开（我的代码将在此处工作），当用户将鼠标悬停在下拉列表中的某个项目上时，父级的背景颜色不会发生变化（这是我的问题）。我的问题是当用户将鼠标悬停在子元素上时，父级的背景颜色会意外地发生变化。我检查了所有课程和代码。我完全不知道这种颜色变化的来源。我已经写了一些jQuery来改变父母的背景颜色，当它的孩子徘徊但它不起作用。此jQuery适用于X等其他属性，但不适用于X和text-decoration。这真的很奇怪。这是我的代码......你能告诉我这个背景颜色变化来自哪里吗？

我的HTML：`

background-color

和我的CSS：

color

您可以在<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 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。如果你能回答我，我会非常感激。

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");
});

我希望我回答你的问题。

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

2 个答案: