Question

我有一个30px高的导航栏。如何在悬停时获取菜单项链接的背景颜色以填充导航栏的整个高度？我担心的是，如果我在屏幕尺寸或缩放时使用填充顶部/底部，它将无法正常显示。

HTML

<nav>
  <li><a href="#">Link</a></li>
</nav>

CSS

nav {
  background-color: #333;
  height: 30px;
  width: 100%;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline;
}

nav ul li a {
  text-decoration: none;
}

nav ul li a:hover {
  background-color: blue;
  padding-left: 10px;
  padding-right: 10px;
}

Answer 1

您需要将nav ul li a { height: 30px; /* or 100% */ line-height: 30px; vertical-align: middle; display: inline-block; }元素设置为完整高度并使用悬停元素;

sankey.js

这应该可以解决问题。

Answer 2

添加以下内容：

nav ul li a {
    height: 30px;
    line-height: 30px;
}

从height

中删除nav

Answer 3

你的意思是如何为整个导航色彩？在这里。

nav {
  background-color: #333;
  height: 30px;
  width: 100%;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline;
}

nav ul li a {
  text-decoration: none;
}

nav ul li a:hover {
  padding-left: 10px;
  padding-right: 10px;
}

nav:hover {
  background-color: blue;
}

<nav>
  <li><a href="#">Link</a></li>
</nav>

在翱翔的色的背景

3 个答案: