基金会 li:hover 背景色

Question

我今天开始使用框架Foundation。我从页面中选择了一个已定义的导航栏。现在我想补充一点，如果有人将鼠标悬停在 li 上，元素的背景颜色应该改变（可能有过渡）。但我不知道如何与元素对话。我的代码在这里（我自己的 css）：

body{
    background-color: rgb(25, 81, 118);
}

li:hover{
    background-color: rgb(25, 81, 118);
}

<!DOCTYPE html>
<html class="no-js" lang="en" >
    <head> 
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Foundation 5</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/foundation.css">
        <link rel="stylesheet" href="css/app.css">
        <script src="js/vendor/modernizr.js"></script>
    </head>
    <body>
        <nav class="top-bar" data-topbar role="navigation">
            <ul class="title-area">
                <li class="name">
                    <h1><a href="#">Startpage4you</a></h1>
                </li> <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
                <li class="toggle-topbar menu-icon">
                    <a href="#"><span></span></a>
                </li>
            </ul>
            <section class="top-bar-section"> <!-- Right Nav Section -->
                <ul class="right">
                    <li class="has-dropdown"> 
                        <a href="#">Anmelden</a>
                        <ul class="dropdown">
                            <li><a href="#">First link in dropdown</a></li>
                            <li><a href="#">Active link in dropdown</a></li>
                        </ul>
                    </li>
                </ul>
            </section>
        </nav>
        
        <!-- End of the body -->
        <script src="js/vendor/jquery.js"></script>
        <script src="js/foundation.min.js"></script>
        <script> 
            $(document).foundation(); 
        </script>
        <!-- -->
    </body>
</html>

Answer 1

body 的

background-color 设置为与 li 的悬停状态相同。除非 li 事先有不同的背景颜色，否则悬停不会显示变化，因为背景会与 body 混合。

相反，您可以只为 li 的悬停状态提供不同的背景颜色：

JS Fiddle

body{
    background-color: rgb(25, 81, 118);
}

li:hover{
    background-color: green;
}

Answer 2

纯粹出于本练习的目的，这是您的代码片段，其中为悬停功能更改了值，因此您可以看到它正在运行。

我还为 sub li 添加了不同的悬停颜色。

我也添加了过渡效果。虽然这需要供应商前缀。

body{
    background-color: rgb(25, 81, 118);
}

li {
 -webkit-transition: all 1s ease-in-out;
 -moz-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
 transition: all 1s ease-in-out;
}

li:hover{
    background-color: rgb(200, 200, 118);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

   li li:hover {
  background-color: rgb(255, 130, 9);
   }

<!DOCTYPE html>
<html class="no-js" lang="en" >
    <head> 
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Foundation 5</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/foundation.css">
        <link rel="stylesheet" href="css/app.css">
        <script src="js/vendor/modernizr.js"></script>
    </head>
    <body>
        <nav class="top-bar" data-topbar role="navigation">
            <ul class="title-area">
                <li class="name">
                    <h1><a href="#">Startpage4you</a></h1>
                </li> <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
                <li class="toggle-topbar menu-icon">
                    <a href="#"><span></span></a>
                </li>
            </ul>
            <section class="top-bar-section"> <!-- Right Nav Section -->
                <ul class="right">
                    <li class="has-dropdown"> 
                        <a href="#">Anmelden</a>
                        <ul class="dropdown">
                            <li><a href="#">First link in dropdown</a></li>
                            <li><a href="#">Active link in dropdown</a></li>
                        </ul>
                    </li>
                </ul>
            </section>
        </nav>
        
        <!-- End of the body -->
        <script src="js/vendor/jquery.js"></script>
        <script src="js/foundation.min.js"></script>
        <script> 
            $(document).foundation(); 
        </script>
        <!-- -->
    </body>
</html>

编辑

根据您的评论，您想知道为什么您的 li 在移动视图中发生变化而不是桌面。就是因为这段代码：

@media only screen and (min-width: 40.063em)
.top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button) {
   color: #FFFFFF;
   background-color: #555555;
   background: #333333;
}

这很奇怪，所以我想知道这是不是您的标记？ background 是一个 shorthand 用于添加几个背景属性，包括 background-color，在本例中它被忽略。

如果您删除其中一个值并将另一个值更改为您可以在页面上看到的颜色以进行测试。它可能看起来像这样（我也在转换中添加了）：

@media only screen and (min-width: 40.063em)
.top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button) {
   color: #FFFFFF;
   background: #660099;
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
}

基金会 li:hover 背景色

Foundation li:hover background-color

html

css

zurb-foundation