我今天开始使用框架 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>最佳答案
纯粹出于本练习的目的，这里是您的代码片段，其中为悬停功能更改了值，因此您可以看到它正在运行。
我还为 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 在移动 View 中发生变化，而不是桌面。是因为这段代码:
@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;
}
关于html - 基础李 :hover background-color，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28858579/