html - 悬停会影响除被悬停元素以外的其他元素

Question

我遇到了悬停问题。每当我将鼠标悬停在特定的 .servNavItemTitle 上时，另一个 .servNavItemTitle 的字体粗细会暂时减小，然后迅速恢复正常。

要在演示中看到它，只需将鼠标悬停在其中一个标题上，然后在 font-weight 减小时观看其他标题。

有人知道问题出在哪里吗？

Here is a jsfiddle demo

这是代码的精简版本:

.servNavItemWrap {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  margin-bottom: 50px;
  text-align: center;
  cursor: pointer;
}

.servNavItemWrap img {
  width: 75px;
  height: 75px;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.servNavItemWrap:hover img {
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.servNavItemWrap a {
  text-decoration: none;
  outline: none;
}

.servNavItemTitle {
  margin-top: 5px;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.servNavItemWrap:hover .servNavItemTitle {
  color: #FFF;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

<div id="serviceNavBlock2" class="iblock">
  <div class="servNavItemWrap">
    <a href="http://localhost:8080/profile.php">
      <img src="" alt="Aluminum Profile">
      <span class="servNavItemTitle hGc block">Aluminum</span>
    </a>
  </div>
  <div class="servNavItemWrap">
    <a href="#">
      <img src="" alt="Aluminum Components">
      <span class="servNavItemTitle hGc block">Components</span>
    </a>
  </div>

Answer 1

在 Temani 缩小问题范围后，我在这里搜索并找到了答案:css transform element affects other element which use transform:scale(0.5) in android webview .基本上，我将 -webkit-backface-visibility: hidden; 添加到缩放后的图像中，现在效果很好。