Question

我有悬停问题。每当我将鼠标悬停在特定.servNavItemTitle上时，其他.servNavItemTitle的字体粗细度会暂时降低，然后很快恢复正常。

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

有谁知道这是什么问题？

以下是代码的缩小版本：

.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。基本上，我将method toArrayConvert(s:seq<int>) returns (a:array<int>) requires |s| > 0 ensures |s| == a.Length ensures forall i :: 0 <= i < a.Length ==> s[i] == a[i] // This is the postcondition that might not hold. { a := new int[|s|]; var i:int := 0; while i < |s| decreases |s| - i invariant 0 <= i <= |s| { a[i] := s[i]; i := i + 1; } return a; // A postcondition might not hold on this return path. }添加到缩放后的图像中，现在效果很好。

悬停效果除了正在悬停的项目之外的其他元素

1 个答案: