html - 改变 li :hover background color with Bootstrap

Question

因此，当您将鼠标悬停在下拉菜单元素上时，我试图将背景颜色设置为#d1e2ff，它适用于插入符号旁边的 a.btn 以及插入符号，但不适用于 li 时我放下菜单。在谷歌开发者工具中，如果我强制 :hover 它有效。它也没有表明存在任何冲突的 css 规则。如果我用自己的鼠标悬停，它仍然显示为白色背景。

我的 css(顶部的有效，底部的无效。我已经尝试了各种特殊性。)

header > div > div > a:hover {
background-color: #d1e2ff;
}

html > body > div > header > #btn-group-justified > div.open > ul.dropdown-menu > li:hover{
    background-color: #d1e2ff;
}

HTML

<header class="page-header">
    <!-- logo -->
    <h1><a href=""><img src="mommyinfologo.png"/></a></h1>
    <div class="btn-group" id="btn-group-justified">
        <!-- Home Group -->
        <div class="btn-group mybtngroup">
            <a class="btn">Home</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/mommy-madness">This Mommy's Madness</a></li>
                <li><a href="/about">About Mommy Info</a></li>
                <li><a href="/contact">Contact Mommy Info</a></li>
            </ul>
        </div>
        <!-- Pregnancy group-->
        <div class="btn-group mybtngroup">
            <a class="btn">Pregnancy</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/pregnancy/trying-to-conceive">Trying to Conceive</a></li>
                <li><a href="/pregnancy/fetal-development">Fetal Development</a></li>
                <li><a href="/pregnancy/gender-predictions">Gender Predictions</a></li>
                <li><a href="/pregnancy/labor-and-delivery">Labor and Delivery</a></li>
            </ul>
        </div>
        <!-- All About Baby group-->
        <div class="btn-group mybtngroup">
            <a class="btn">All About Baby</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/all-about-baby/advice">Advice</a></li>
                <li><a href="/all-about-baby/guidelines">Guidelines</a></li>
                <li><a href="/all-about-baby/milestones">Milestones</a></li>
                <li><a href="/all-about-baby/learning-development">Learning Development</a></li>
            </ul>
        </div>
        <!-- Health and Nutrition group-->
        <div class="btn-group mybtngroup">
            <a class="btn">Health and Nutrition</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/health-and-nutrition/pregnancy-nutrition">Pregnancy Nutrition</a></li>
                <li><a href="/health-and-nutrition/breastfeeding">Breastfeeding</a></li>
                <li><a href="/health-and-nutrition/formula-feeding">Formula Feeding</a></li>
                <li><a href="/health-and-nutrition/toddler-nutrition">Toddler Nutrition</a></li>
                <li><a href="/health-and-nutrition/prenatal-exercise">Prenatal Exercise</a></li>
                <li><a href="/health-and-nutrition/postpartum-exercise">Postpartum Exercise</a></li>
                <li><a href="/health-and-nutrition/organic-diy-health">Organic DIY Health</a></li>
            </ul>
        </div>
        <!-- Party Momma group-->
        <div class="btn-group mybtngroup">
            <a class="btn">Party Momma</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/party-momma/pregnancy-announcement">Pregnancy Announcement</a></li>
                <li><a href="/party-momma/gender-reveal">Gender Reveal</a></li>
                <li><a href="/party-momma/baby-shower">Baby Shower</a></li>
                <li><a href="/party-momma/birth-announcement">Birth Announcement</a></li>
                <li><a href="/party-momma/birthdays">Birthdays</a></li>
            </ul>
        </div>
        <!-- Stations group-->
        <div class="btn-group mybtngroup">
            <a class="btn">Stations</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/stations/hospital-bag">Hospital Bag</a></li>
                <li><a href="/stations/diaper-bag">Diaper Bag</a></li>
                <li><a href="/stations/changing-station">Changing Station</a></li>
                <li><a href="/stations/baby-gear">Baby Gear</a></li>
            </ul>
        </div>
        <!-- Memory Markers group-->
        <div class="btn-group mybtngroup">
            <a class="btn">Memory Markers</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/memory-markers/diy">Do It Yourself</a></li>
                <li><a href="/memory-markers/buy-it">Buy It</a></li>
            </ul>
        </div>
        <!-- Reviews group-->
        <div class="btn-group mybtngroup">
            <a class="btn mycaret">Reviews</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="reviews/games">Game Reviews</a></li>
                <li><a href="reviews/gear">Gear Reviews</a></li>
                <li><a href="reviews/learning">Learning Reviews</a></li>
            </ul>
        </div>
        <!-- Blog-->
        <a class="btn mybtngroup" href="/mommy-madness">
            Blog
        </a>
    </div> <!-- closing div#btn-group-justified -->
</header>

Answer 1

您的选择器有误。 body 和header 之间没有div，您需要将:hover 选择器应用到 >a，不是 li

header > div > div > a:hover {
background-color: #d1e2ff;
}

html > body > header > #btn-group-justified > div.open > ul.dropdown-menu > li a:hover{
    background-color: #d1e2ff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="page-header">
    <!-- logo -->
    <h1><a href=""><img src="mommyinfologo.png"/></a></h1>
    <div class="btn-group" id="btn-group-justified">
        <!-- Home Group -->
        <div class="btn-group mybtngroup">
            <a class="btn">Home</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/mommy-madness">This Mommy's Madness</a></li>
                <li><a href="/about">About Mommy Info</a></li>
                <li><a href="/contact">Contact Mommy Info</a></li>
            </ul>
        </div>
        <!-- Pregnancy group-->
        <div class="btn-group mybtngroup">
            <a class="btn">Pregnancy</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/pregnancy/trying-to-conceive">Trying to Conceive</a></li>
                <li><a href="/pregnancy/fetal-development">Fetal Development</a></li>
                <li><a href="/pregnancy/gender-predictions">Gender Predictions</a></li>
                <li><a href="/pregnancy/labor-and-delivery">Labor and Delivery</a></li>
            </ul>
        </div>
        <!-- All About Baby group-->
        <div class="btn-group mybtngroup">
            <a class="btn">All About Baby</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/all-about-baby/advice">Advice</a></li>
                <li><a href="/all-about-baby/guidelines">Guidelines</a></li>
                <li><a href="/all-about-baby/milestones">Milestones</a></li>
                <li><a href="/all-about-baby/learning-development">Learning Development</a></li>
            </ul>
        </div>
        <!-- Health and Nutrition group-->
        <div class="btn-group mybtngroup">
            <a class="btn">Health and Nutrition</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/health-and-nutrition/pregnancy-nutrition">Pregnancy Nutrition</a></li>
                <li><a href="/health-and-nutrition/breastfeeding">Breastfeeding</a></li>
                <li><a href="/health-and-nutrition/formula-feeding">Formula Feeding</a></li>
                <li><a href="/health-and-nutrition/toddler-nutrition">Toddler Nutrition</a></li>
                <li><a href="/health-and-nutrition/prenatal-exercise">Prenatal Exercise</a></li>
                <li><a href="/health-and-nutrition/postpartum-exercise">Postpartum Exercise</a></li>
                <li><a href="/health-and-nutrition/organic-diy-health">Organic DIY Health</a></li>
            </ul>
        </div>
        <!-- Party Momma group-->
        <div class="btn-group mybtngroup">
            <a class="btn">Party Momma</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/party-momma/pregnancy-announcement">Pregnancy Announcement</a></li>
                <li><a href="/party-momma/gender-reveal">Gender Reveal</a></li>
                <li><a href="/party-momma/baby-shower">Baby Shower</a></li>
                <li><a href="/party-momma/birth-announcement">Birth Announcement</a></li>
                <li><a href="/party-momma/birthdays">Birthdays</a></li>
            </ul>
        </div>
        <!-- Stations group-->
        <div class="btn-group mybtngroup">
            <a class="btn">Stations</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/stations/hospital-bag">Hospital Bag</a></li>
                <li><a href="/stations/diaper-bag">Diaper Bag</a></li>
                <li><a href="/stations/changing-station">Changing Station</a></li>
                <li><a href="/stations/baby-gear">Baby Gear</a></li>
            </ul>
        </div>
        <!-- Memory Markers group-->
        <div class="btn-group mybtngroup">
            <a class="btn">Memory Markers</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/memory-markers/diy">Do It Yourself</a></li>
                <li><a href="/memory-markers/buy-it">Buy It</a></li>
            </ul>
        </div>
        <!-- Reviews group-->
        <div class="btn-group mybtngroup">
            <a class="btn mycaret">Reviews</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="reviews/games">Game Reviews</a></li>
                <li><a href="reviews/gear">Gear Reviews</a></li>
                <li><a href="reviews/learning">Learning Reviews</a></li>
            </ul>
        </div>
        <!-- Blog-->
        <a class="btn mybtngroup" href="/mommy-madness">
            Blog
        </a>
    </div> <!-- closing div#btn-group-justified -->
</header>