Поменять стиль элемента при наведении на другой элемент

Question

Нужно при наведении на three поменять стиль six (средствами CSS)

body {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: space-between;
}
.three {
  width: 20px;
  height: 20px;
  background-color: blue;
}
.six {
  width: 20px;
  height: 20px;
  background-color: yellow;
}

<div class="one">
  <div class="two">
    <div class="three">
    </div>
  </div>
</div>
<div class="four">
  <div class="five">
    <div class="six">
    </div>
  </div>
</div>

Гуглил и ничего толкового не нашел

Вот тут было похожее обсуждение. Решили путем javascript — Yenin Artem, Mar 06 '19 at 14:13

score 3 · Answer 1 · answered Mar 06 '19 at 13:36

Чистым CSS такое не сделать, только если элементы на одном уровне

CSS Selector Reference

body{
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: space-between;
}
.three{
  width: 20px;
  height: 20px;
  background-color: blue;
}
.six{
  width: 20px;
  height: 20px;
  background-color: yellow;
}
.one:hover + .four .six{
  background-color: blue;
}

<div class="one">
  <div class="two">
    <div class="three">
      </div>
    </div>
</div>
<div class="four">
    <div class="five">
      <div class="six">
        </div>
      </div>
  </div>

При помощи jQuery будет так (ассоциация):

$(function() {
  $('.three').hover(function() {
    $('.six').css('background-color', 'blue');
  }, function() {
    // on mouseout, reset the background colour
    $('.six').css('background-color', 'yellow');
  });
});

Ну можно чуть допилить) – Qwertiy Mar 06 '19 at 13:58 — Qwertiy, Mar 06 '19 at 13:58

score 2 · Accepted Answer · answered Mar 06 '19 at 13:56

2

По идее так нельзя.

Но можно немного исхитриться. В хроме работает, в остальных не проверял.

body {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: space-between;
}
.one, .four {
  outline: 1px dotted red;
}
.three {
  width: 20px;
  height: 20px;
  background-color: blue;
}
.six {
  width: 20px;
  height: 20px;
  background-color: yellow;
}
.one {
  pointer-events: none;
}
.three {
  pointer-events: all;
}
.one:hover ~ .four .six {
  background: red;
}

<div class="one">
  <div class="two">
    <div class="three">
    </div>
  </div>
</div>
<div class="four">
  <div class="five">
    <div class="six">
    </div>
  </div>
</div>

answered Mar 06 '19 at 13:56

Qwertiy

123,725

1

Проверил, в ФФ и Edge - тоже работает. Благодарю! Можете пояснить как, в данном случае, работает pointer-events: all? – Dmytro Mar 06 '19 at 14:15
@Дмытрык, снова разрешает элементу реагировать на мышку. – Qwertiy Mar 06 '19 at 14:19
кстати ..тут вопрос назрел ..а при наведении на жёлтый сменить синий , как ? – Резидент Казахстана Mar 06 '19 at 14:24
1

@ПавелВаршавский, прикрыть его сверху прозрачным блоком, который в разметке будет раньше синего, но во флексе за счёт order встанет в нужное место)) – Qwertiy Mar 06 '19 at 14:36
1

@ПавелВаршавский, а ещё вот так: https://ru.stackoverflow.com/a/521309/178988. – Qwertiy Mar 06 '19 at 14:40
@Qwertiy спасибо .. – Резидент Казахстана Mar 06 '19 at 14:42
@ПавелВаршавский, мог бы и "лайкнуть" ответ – Dmytro Mar 06 '19 at 14:53
@Дмытрык сорри ..запарился – Резидент Казахстана Mar 06 '19 at 15:14
@ПавелВаршавский, а ещё вот такое есть - как раз с подменой и наложением: https://ru.stackoverflow.com/a/521289/178988 – Qwertiy Mar 06 '19 at 16:56
1

@Дмытрык, если полазить по моим css'ным ответам, там много всяких финтов найти можно)) – Qwertiy Mar 06 '19 at 16:57
@ПавелВаршавский, о, похоже все 3 варианта с подсветкой в том вопросе. Из интересного у меня ещё :focus где-то был, когда я baseline смещал. – Qwertiy Mar 06 '19 at 17:03

Поменять стиль элемента при наведении на другой элемент

2 Answers2