導航欄專案在懸停時晃動-有解無憂

我是學習網頁設計的新手。我正在為我的實踐創建一個示例網站。我被困在導航欄專案問題上。在串列項上添加懸停效果后，當我將滑鼠懸停在它們上時，我的專案開始晃動。

這是我的代碼：

<nav>
            <div>
            </div>
            <ul>
                <li><a>one</a></li>
                <li><a>two</a></li>
                <li><a>three</a></li>
            </ul>
        </nav>

CSS 樣式：

nav {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    align-content: center;
    align-items: center;
    width: 100%;
    background-color: #a33454;
}

nav div {
    height: 60px;
    width: 150px;
    margin: 0.5rem;
}

nav ul {
    display: flex;
    list-style: none;
    justify-content: space-between;
    margin: 0.5rem;
    align-items: center;
    align-content: center;
}

nav ul li {
    font-size: 1.3rem;
    padding: 0.5rem;
    margin: 0.2rem 0.6rem;
}

nav ul li:hover{
    border-bottom: 4px solid #022222;
}

我還創建了一個沙盒演示

uj5u.com熱心網友回復：

這是由于border-bottom懸停時出現的。那就是在高度上增加 4px。

最好的解決方法是在非懸停狀態下也有一個邊框，但使其不可見。

nav ul li {
    font-size: 1.3rem;
    padding: 0.5rem;
    margin: 0.2rem 0.6rem;
    border-bottom: 4px solid transparent;
}

nav ul li:hover{
    border-bottom: 4px solid #022222;
}

通過將顏色設定為透明，它將不可見。

uj5u.com熱心網友回復：

這是因為border-bottom實際上增加了內容框的大小4px。閱讀更多：https ://www.w3schools.com/css/css_boxmodel.asp

您可以使用偽元素::after在 -element 下創建一條 4px 的線，li如下所示：

nav {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  align-content: center;
  align-items: center;
  width: 100%;
  background-color: #a33454;
}

nav div {
  margin: 0.5rem;
}

nav div {
  height: 60px;
  width: 150px;
}

nav ul {
  display: flex;
  list-style: none;
  justify-content: space-between;
  margin: 0.5rem;
  align-items: center;
  align-content: center;
}

nav ul li {
  font-size: 1.3rem;
  padding: 0.5rem;
  margin: 0.2rem 0.6rem;
  position: relative;
}

nav ul li::after {
  content: '';
  display: none;
  position: absolute;
  color: #022222;
  background-color: #022222;
  height: 4px;
  width: 100%;
  bottom: 0;
  left: 0;
}

nav ul li:hover::after {
  display: block;
}

<header>
  <nav>
    <div>
    </div>
    <ul>
      <li><a>one</a></li>
      <li><a>two</a></li>
      <li><a>three</a></li>
    </ul>
  </nav>
  <div class="banner">

  </div>
</header>

通過給它width: 100%and height: 4px;，偽元素將具有li-element 的完整寬度以及指定的4px高度。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/454075.html

標籤：html css

上一篇：源埠和目標埠不同，因此我需要在入站aws安全組中提及哪個埠號

下一篇：如何在CSS中制作對話氣泡形狀？