Question

我有一个自定义导航栏，如下所示：

:root {
  --navbar-background-color: #ff1a1a;
  --navbar-text-color: var(--header-text-color) !important;
  --navbar-height: 23px;
  --navbar-top: 40px;
  --navbar-font-size:
}

#custom-navbar {
  overflow: hidden;
  background-color: var(--navbar-background-color);
  height: var(--navbar-height);
  top: var(--navbar-top);
  right: 0;
  left: 0;
  position: fixed;
  overflow-y: hidden;
  z-index: 1;
  padding-right: 50px;
  padding-top: 3px;
  display: inline;
  text-align: right;
}

#custom-navbar p {
  color: var(--navbar-text-color);
  display: inline;
  padding: 10px;
  font-size: var(--navbar-font-size);
  text-decorations: none;
  height: 100% !important;
}

#custom-navbar a:hover {
  background-color: grey;
}

<div id="custom-navbar">
  <a href="#">
    <p>LINK 1</p>
  </a>
  <a href="#">
    <p>LINK 2</p>
  </a>
  <a href="#">
    <p>LINK 3</p>
  </a>
  <a href="#">
    <p>LINK 4</p>
  </a>
</div>

当我将鼠标悬停在导航栏的链接之一上时，该链接将以灰色突出显示。但是，仍有一些导航栏初始颜色可见：突出显示的颜色并不能覆盖所有导航栏高度。

jsfiddle：https://jsfiddle.net/rafn51sk/3/

我该如何解决？我尝试将height: 100%设置为导航栏的p元素，但这没有用。

Answer 1

不要在A内使用P，这是一件坏事look this working example

HTML：

<div id="custom-navbar">
       <a href="#">LINK 1</a>
       <a href="#">LINK 2</a>
       <a href="#">LINK 3</a>
       <a href="#">LINK 4</a>
</div>

CSS：

:root  {
    --navbar-background-color: #ff1a1a;

    --navbar-text-color: var(--header-text-color) !important;
    --navbar-height: 23px;
    --navbar-top: 40px;
    --navbar-font-size:

}

#custom-navbar {
    overflow: hidden;
    background-color: var(--navbar-background-color);

    height: var(--navbar-height);

    top: var(--navbar-top);
    right: 0;
    left: 0;
    position: fixed;
    overflow-y: hidden;
    z-index: 1;

    padding-right: 50px;
    padding-top: 3px;
    display: inline;
    text-align: right;

}


#custom-navbar a  {
    color: var(--navbar-text-color);
    display: inline;
    padding: 10px;
    font-size: var(--navbar-font-size);
    text-decoration: none;

    height: 100% !important;
}

#custom-navbar a:hover  {
    background-color: grey;
}

Answer 2

提供a标签

display: inline-block;

之后的高度：100％；将工作。（内联元素没有任何高度，内联块具有高度。您还需要取消导航栏div中的填充。

Answer 3

~~当在position: fixed上使用Navbar并尝试将其删除时，这是一个常见的副作用，当您将鼠标悬停在<a>上时，它会填补Vertical Height的导航栏~~ -感谢Temani Afif纠正了我的情况，这是错误的信息 -实际上，position: fixed和{ {1}}仅影响其元素，而不影响其子节点！

解决方案

您需要将这几个CSS属性添加到position: absolute标记中：

<a>

进一步编辑

从您的display: inline-block; height: 100%;中删除padding-top: 3px
删除内部Navbar标记，它们没有用，并且使您难以使用代码/对其进行样式设置！
从您的<p>中删除无用的display: inline;-#custom-navbar删除了position: fixed属性！
您可以添加诸如display之类的内容，以在链接之间保持空格！ （我已经在下面添加了它！）

因此，完整代码现在看起来像这样：

margin: 0 5px

:root {
  --navbar-background-color: #ff1a1a;
  --navbar-text-color: var(--header-text-color) !important;
  --navbar-height: 23px;
  --navbar-top: 40px;
  --navbar-font-size:
}

#custom-navbar {
  overflow: hidden;
  background-color: var(--navbar-background-color);
  height: var(--navbar-height);
  top: var(--navbar-top);
  right: 0;
  left: 0;
  position: fixed;
  overflow-y: hidden;
  z-index: 1;
  padding-right: 50px;
  text-align: right;
}

#custom-navbar a {
  display: inline-block;
  margin: 0 5px;
  height: 100%;
}

#custom-navbar a:hover {
  background-color: grey;
}

Javascript：div中的元素：悬停时突出显示高度

3 个答案:

解决方案

进一步编辑