Question

我有一些div，用作导航按钮。当我将鼠标悬停在底部上时，我希望它们出现细黑线。我尝试使用 Cnnnn - something to do with narrowing 但它没有用，但奇怪的是 border-bottom 和 bottom-top 确实有效。为什么？

border-right

#box-a {
background: red;
grid-area: a;
}

#box-b {
background: blue;
grid-area: b;
}

#box-c {
background: green;
grid-area: c;
}

.main {
  display: grid;
  grid-template-areas: "a a"
                       "b c";
  grid-template-rows: 40px auto;
  grid-template-columns: 1fr 4fr;
  }
  
.header-button {
            background: red;
            height: 50px;
            width: 80px;
            color: white;
            display: inline-block;
            text-align: center;
            padding: 10px;
            }
            
.header-button:hover {
                  color: yellow;
                  border-bottom: 3px solid black;
                 }

Answer 1

好的，你有两个问题：

您的高度在您行的子元素中指定，其子元素显示在下一个同级元素下方。如果您检查元素并在代码检查器中突出显示它们，它将显示那里发生的溢出。因此，我们移除了标题按钮上的高度，并让您拥有的 40 像素在您的网格父级的 grid-template-rows 属性中处理高度。
您的下边框显示在 box-b 和 box-c 元素下方，在那里设置 z-index: -1，导航按钮将显示在顶部。

#box-a {
  background: red;
  grid-area: a;
}

#box-b {
  background: blue;
  grid-area: b;
  z-index: -1;
}

#box-c {
  background: green;
  grid-area: c;
  z-index: -1;
}

.main {
  display: grid;
  grid-template-areas: "a a" "b c";
  grid-template-rows: 40px auto;
  grid-template-columns: 1fr 4fr;
}

.header-button {
  background: red;
  width: 80px;
  color: white;
  display: inline-block;
  text-align: center;
  padding: 10px;
}

.header-button:hover {
  color: yellow;
  border-bottom: 3px solid black;
}

<body>
  <div class="main">
    <div id=box-a>
      <div class=header-button>About</div>
      <div class=header-button>How to</div>
      <div class=header-button>Info</div>
      <div class=header-button>More</div>
    </div>
    <div id=box-b>
      <p>
        This is the content of box B.
      </p>
    </div>
    <div id=box-c>
      <p>
        This is the content of box C.
      </p>
    </div>
  </div>
</body>

当我将鼠标悬停在 div 上时，如何使底部边框出现？

1 个答案: