悬停时导航栏上的css img会跳转答案

【问题标题】：css img on navbar jumps when hover悬停时导航栏上的css img会跳转
【发布时间】：2022-02-16 12:50:02
【问题描述】：

我是 CSS 的新手，我正在尝试让这个垂直的右侧菜单正常工作。问题：当我将鼠标悬停在图像上时，它们会变大（这是有意的），但是当我将鼠标悬停在图像之间时，一切似乎都在跳跃，我不知道为什么。

body {
  font-family: "Quicksand", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #eee4e4;
  overflow-x: hidden;
}

ul {
  list-style-type: none;
  box-sizing: border-box;
  float: right;
  position: fixed;
  z-index: 1000;
  right: 0;
  top: 0;
  height: 100%;
  overflow: auto;
  text-align: center;
}

li {
  padding-bottom: 10px;
  padding-top: 10px;
  padding-right: 10px;
  border: solid 2px blue;
}

img {
  height: 40px;
  width: 40px;
}

img:hover {
  width: 50px;
  height: 50px;
}

li:hover {
  padding-right: 0px;
  padding-bottom: 0px;
}

<body>
  <!-- Social Media NAV -->
  <nav>
    <ul>
      <li>
        <a href="#"><img src="img/facebook1.svg" alt="Facebook"></img>
        </a>
      </li>
      <li>
        <a href="#"><img src="img/twitter1.svg" alt="Twitter"></img>
        </a>
      </li>
      <li>
        <a href="#"><img src="img/instagram1.svg" alt="Instagram"></img>
        </a>
      </li>
      <li>
        <a href="#"><img src="img/whatsapp1.svg" alt="Whatsapp"></img>
        </a>
      </li>
    </ul>
  </nav>
</body>

【问题讨论】：

标签： html css

【解决方案1】：

这是因为您还有一个 li:hover 会影响填充。

也许另一种解决方案是在<img> 中使用transform 并删除li:hover

img:hover {
   transform: scale(1.2)
}

【讨论】：

唯一的问题是，您可能希望在整个 li 的悬停时触发样式，而不仅仅是悬停在图像上 - 实现此目的的两种方法 - 因为 img 被包裹在一个元素 - 让它显示：块以填充整个 li 并将样式规则放在那个... nv li a {disaply: block} .... nav li a:hover img{ transform: scale(1.2) }。 .. 或者只是将悬停应用到 li 本身 - nav li:hover img {transform: scale(1.2)...} - 始终记住 a 元素是内联的，因此悬停在 a 周围的 li 的空白处不会触发样式规则