Наведите указатель мыши на другие элементы, кроме объекта - PullRequest
Новая
       5

Наведите указатель мыши на другие элементы, кроме объекта

0 голосов
/ 22 мая 2018

У меня проблема с парением.Всякий раз, когда я наводю указатель мыши на определенный .servNavItemTitle, вес шрифта для другого .servNavItemTitle на мгновение уменьшается, а затем быстро возвращается к нормальному.

Чтобы увидеть его в демоверсии, просто наведите указатель мыши на один из заголовков и посмотрите другие заголовки, когда font-weight уменьшится.

Кто-нибудь видит проблему?

Вот демоверсия jsfiddle

Вот сокращенная версия кода: 

.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>

1 Ответ

0 голосов
/ 22 мая 2018

После того, как Темани сузил проблему, я искал и нашел ответ здесь: Элемент css transform влияет на другой элемент, который использует transform: scale (0.5) в android webview .По сути, я добавил -webkit-backface-visibility: hidden; к масштабированному изображению, и теперь оно отлично работает.

...