затухать все, но ссылка не работает в Chrome

Question

Я использую этот эффект при наведении, когда все, кроме наведенного элемента, исчезает, вы можете увидеть его во фрагменте ниже.

Он работает в Firefox (версия 66.0.3), но не в Chrome (версия73.0.3683.103).Я также попробовал Microsoft Edge, он там тоже работает.

Я попытался добавить «-webkit-», потому что я прочитал, что это может решить проблему, но это не так.Кто-нибудь знает, как добиться этого эффекта парения в Chrome?

.links{
  font-weight: bold;
  font-size: 20px;
}

/* Hover Effect */
.hover {
  visibility: hidden;
}

.hover > * {
  visibility: visible;
  transition: opacity 100ms linear 100ms;
}

.hover:hover > * {
  opacity: 0.3;
}

.hover > *:hover {
  opacity: 1;
  transition-delay: 0ms, 0ms;
}

РЕДАКТИРОВАТЬ: Это работает в Chrome, если я удаляю ссылки (в моем случае ссылки на другие страницы сайта).

Работа в Chrome:

.links {
  font-weight: bold;
  font-size: 20px;
}


/* Hover Effect */

.hover {
  visibility: hidden;
}

.hover>* {
  visibility: visible;
  transition: opacity 100ms linear 100ms;
}

.hover:hover>* {
  opacity: 0.3;
}

.hover>*:hover {
  opacity: 1;
  transition-delay: 0ms, 0ms;
}

<div class="links">
  <div class="hover">
    <div class="linkNav">1</div>
    <div class="linkNav">2</div>
    <div class="linkNav">3</div>
  </div>
</div>

Не работает в Chrome:

.links {
  font-weight: bold;
  font-size: 20px;
}


/* Hover Effect */

.hover {
  visibility: hidden;
}

.hover>* {
  visibility: visible;
  transition: opacity 100ms linear 100ms;
}

.hover:hover>* {
  opacity: 0.3;
}

.hover>*:hover {
  opacity: 1;
  transition-delay: 0ms, 0ms;
}

<div class="links">
  <div class="hover">
    <a href="1.html">
      <div class="linkNav">1</div>
    </a>
    <a href="2.html">
      <div class="linkNav">2</div>
    </a>
    <a href="3.html">
      <div class="linkNav">3</div>
    </a>
  </div>
</div>

Answer 1

(нет. Я обновил этот ответ после того, как заметил проблему с HTML).

Я упростил ваш CSS, чтобы попытаться изолировать проблему (я удалил свойства видимости, которые ничего не делают, а также селекторы > *)

Неудивительно, что в этом случае непредсказуемое поведение, потому что строго говоря, вы не должны помещать элемент уровня блока, такой как <div>, внутри элемента <a>.

Похоже, что в этом случае неправильно сформированный HTML, Chrome не распознает значение непрозрачности тега привязки (<a>), если я не сделаю что-то вроде установки его на display: block или display:inline-block. FireFox, Edge и IE распознают непрозрачность независимо.

Лучшим решением было бы исправить ваш HTML, чтобы элементы уровня блока правильно оборачивали встроенные элементы.

.links {
  font-weight: bold;
  font-size: 20px;
}

.hover:hover a {
  opacity: 0.3;
}

.hover a:hover {
  opacity: 1;
}

<div class="links hover">
  <div class="linkNav"><a href="1.html">1</a></div>
  <div class="linkNav"><a href="2.html">2</a></div>
  <div class="linkNav"><a href="3.html">3</a></div>
</div>

Я бы порекомендовал исправить это следующим образом, но если по какой-то причине вы не можете исправить HTM, обходной путь - установить свойство display для ваших тегов привязки. Вот так:

.links {
  font-weight: bold;
  font-size: 20px;
}

.links a {
  display:block;
}

.hover:hover a {
  opacity: 0.3;
}

.hover a:hover {
  opacity: 1;
}

<div class="links hover">
    <a href="1.html"><div class="linkNav">1</div></a>
    <a href="2.html"><div class="linkNav">2</div></a>
    <a href="3.html"><div class="linkNav">3</div></a>
  </div>

Или альтернативное решение - вы можете просто нацелить альтернативный элемент, такой как внутренний div вместо тега a.

JSFiddle ссылки для различных решений и оригинального CVE, который демонстрирует проблему (полезно для тестирования в разных браузерах):

Решение путем установки display block

Решение путем изменения селектора на целевой внутренний div

Оригинальный CVE, который работает в большинстве браузеров, но не в Chrome

Answer 2

Я исправил код, проблема здесь была в том порядке, в котором вы добавляли HTML

Тег содержит div и класс для того, к чему селектор при наведении не смог добраться.

Теперь посмотри, все отлично работает.Это все, я думаю.Надеюсь, это решит вашу проблему.

.links {
  font-weight: bold;
  font-size: 20px;
}


/* Hover Effect */

.hover {
  visibility: hidden;
}

.hover>* {
  visibility: visible;
  transition: opacity 100ms linear 100ms;
}

.hover:hover>* {
  opacity: 0.3;
}

.hover>*:hover {
  opacity: 1;
  transition-delay: 0ms, 0ms;
}

<div class="links">
  <div class="hover">
    <a href="1.html" class="linkNav">1</a>
    <a href="2.html" class="linkNav">2</a>
    <a href="3.html" class="linkNav">3</a>
  </div>
</div>