Как стилизовать все элементы одного типа, кроме навесного? - PullRequest
Новая
       9

Как стилизовать все элементы одного типа, кроме навесного?

1 голос
/ 21 октября 2019

Я хочу стилизовать строку с четырьмя столбцами, чтобы изменить непрозрачность после наведения на 0,5, но у фактически наведенного столбца должна быть непрозрачность 1, поэтому в основном каждый столбец получает стиль, кроме наведенного.

Я пробовал что-то вроде: 

div.airsuspension-submenu div.row div:hover .nav-highlight:not(div.airsuspension-submenu div.row div .nav-highlight:hover) {
    opacity: 0.5;
}

у всех наведенных div.row div элементов должна быть непрозрачность 0,5, но у накрытых div.row div .nav-highlight должна быть непрозрачность 1

1 Ответ

2 голосов
/ 21 октября 2019

Лучше всего сделать это без javascript, если применить цвет фона к родительскому контейнеру, а затем уменьшить непрозрачность при наведении на родительский элемент для всех дочерних элементов, а затем увеличить непрозрачность определенного элемента, наведенного поверх. 

.d-flex {
  display: flex;
  justify-content: space-around;
}
.d-flex:hover > div {
  opacity: 0.5;
}
.d-flex:hover > div:hover {
  opacity: 1;
}

.item {
  background: red;
  flex-grow: 1;
  padding: 1rem;
  transition: opacity 1s ease-in-out;
  color: white;
}
<div class="d-flex">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
</div>
...