当我悬停在链接周围时，我希望列表项的白色背景触摸导航栏的顶部和底部
当我在链接周围悬停时，我基本上希望列表项漂亮的白色背景接触到导航栏的顶部和底部，这对于所有意图和目的来说都是非常重要的。 我实际上尝试了填充链接，但我仍然不能肯定地解决这个问题，这表明我出于所有意图和目的，希望列表项的白色背景在我通常在链接周围悬停时，触摸到导航栏的顶部和底部，或者他们特别这么认为。 你们能帮我一把吗？这特别重要。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.brand-title {
font-size: 1.5rem;
color: #eee;
}
.navbar {
display: flex;
justify-content: space-between;
width: 80%;
margin: auto;
align-items: center;
padding: 10px;
}
header {
background-color: #333;
}
.navbar-links {
display: flex;
}
.navbar-links a{
color: orangered;
text-decoration: none;
display: block;
padding: .5rem;
}
.navbar-links li {
list-style-type: none;
justify-content: space-between;
margin-left: 10px;
}
.navbar-links li:hover {
background-color: white;
}
</style>
</head>
<body>
<header>
<nav class="navbar">
<div class="brand-title">Navbar</div>
<ul class="navbar-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>
共有3个答案
我想你要找的就是盒影。 如果你改变
.navbar-links li:hover {
background-color: white;
}
至
.navbar-links li:hover {
background-color: white;
box-shadow: 0 10px white;
}
我想你会得到你追求的结果。
从.navbar类中删除填充:10px并将其添加到.navbar-links li中
.navbar-links li {
list-style-type: none;
justify-content: space-between;
margin-left: 10px;
padding:10px;
}
.navbar {
display: flex;
justify-content: space-between;
width: 80%;
margin: auto;
align-items: center;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.brand-title {
font-size: 1.5rem;
color: #eee;
height: 100%;
display: flex;
align-items: center;
}
.navbar {
display: flex;
justify-content: space-between;
width: 80%;
margin: auto;
align-items: center;
height: 80px;
}
header {
background-color: #333;
}
.navbar-links {
display: flex;
height: 100%;
align-items: center;
}
.navbar-links a{
color: orangered;
text-decoration: none;
display: block;
padding: .5rem;
}
.navbar-links li {
list-style-type: none;
justify-content: space-between;
margin-left: 10px;`enter code here`
}
.navbar-links li:hover {
display: flex;
background-color: white;
height: 100%;
align-items: center;
}
你可以试试这个。 我修改了你的一些代码。 如果你有什么不清楚的地方，请告诉我。
-
我可以改变一个div的背景图像，当我悬停几个链接，我的意思是，如果我悬停在link1有一个背景，link2有另一个背景，等等。 它能用JavaScript、jQuery或简单的CSS技巧完成吗？ 谁能告诉我我做错了什么吗？？？？
-
我有一个下面的。奇怪的是，UITableView的上部是白色背景。tableView会很好地滚动到UITextField的下方，因此它被正确地放置在下方。只是上部不知何故变成了白色背景。这一部分似乎与的高度有关。也就是说，如果我增加文本字段的高度，白色部分也会增加。 我已尝试将调整滚动视图插入设置为false，但无效。
-
本文向大家介绍在默认的Bootstrap导航栏中为活动链接添加灰色背景色，包括了在默认的Bootstrap导航栏中为活动链接添加灰色背景色的使用技巧和注意事项，需要的朋友参考一下 要将灰色背景色添加到活动链接，请使用Bootstrap中的.active类。 您可以尝试运行以下代码来实现.active类- 示例
-
当我触摸文本输入时，我希望键盘不会显示出来。如果我使用“keyboard.Dississ”，我会放松对文本输入的关注，我使用的是自定义键盘，它本身是我屏幕的一部分，所以我不希望任何键盘显示出来，而不会放松对文本输入的关注，任何解决方案都可以。我尝试使用库，但一次又一次地面临同样的问题，我该怎么办。这里是我使用的代码
-
顶部导航栏放在页面头部： 实例<nav data-topbar> <ul> <li> <!-- 如果你不需要标题或图标可以删掉它 --> <h1><a href="#">WebSiteName</a></h1> </li> <!-- 小屏幕上折叠按钮: 去掉 .menu-icon 类，可以去除图标。 如果需要只显示图片，可以删除
-
因为我使用可变颜色的按钮，我需要添加内联css。悬停颜色是其他变量。我不能在内联css上添加悬停选择器，所以我必须使用js。我试着用. hover（）来做，但是当我悬停按钮时，两种颜色都消失了。 代码： HTML:
-
Tabbar 底部导航栏 1.4.8 优点： 此组件一般用于应用的底部导航，具有如下特点： 可以设置凸起的按钮，且是全端通用的 图标可以使用字体图标(内置图标和扩展图标)或者图片 可以动态切换菜单的数量以及配置 切换菜单之前，可以进行回调鉴权 可以设置角标 有效防止组件区域高度塌陷，无需给父元素额外的内边距或者外边距来避开导航的区域 缺点： 虽然优点很多，但是如果用此组件模拟tabbar页面的话依
-
当我的应用程序运行时，我的自定义操作栏和列表视图之间有一个空白空白，我想删除它，但找不到任何类方法或xml设置来做到这一点。 下面是我使用列表视图的静态编程语言代码： 下面是我列表视图的xml代码： 下面是的静态编程语言代码： 下面是的xml代码：