Question

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

纯粹为了本练习的目的，这里是你的代码片段，其中为hover函数更改了值，因此你可以看到它正常工作。

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

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

修改

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

@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是添加多个背景属性的简写，包括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; }

Answer 2

正文的

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

相反，您可以将li悬停状态设置为不同的背景颜色：

JS Fiddle

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

li:hover{
    background-color: green;
}

李基金：悬停背景颜色

2 个答案: