Как обратиться к элементу до элемента?

Question

Нужно чтобы когда наводишь первый элемент менялся второй элемент, а когда наводишь мышь на второй элемент менялся первый.

код:

          .w_b {
                margin: 0 auto;
                background-color: #eacf6b;
                padding: 30px;
                width: 50vw;
                text-align: center;
                display: flex;
                justify-content: center;
            .write {
                margin-right: 5vw;
                width: 100px;
                height: 100px;
                background-color: #fff;
                border: 5px solid #000;
                border-radius: 20px;
                &:hover {
                    background-color: #000;
                    border: 5px solid #fff;                    
                }
                &:hover ~ .black {
                    background-color: #fff;
                    border: 5px solid #000;
                }
            }
            .black {
                    margin-left: 5vw;
                    width: 100px;
                    height: 100px;
                    background-color: #000;
                    border: 5px solid #fff;
                    border-radius: 20px;
                    &:hover {
                        background-color: #fff;
                        border: 5px solid #000;               
                    }
                     &:hover ~ .write {
                        background-color: #000;
                        border: 5px solid #fff;  
                    }
                }

Проблема в том, что &:hover ~ .write не хочет изменять элемент.

Answer 1

Используйте псевдокласс :has, для решения вашей задачи:

.w_b {
  margin: 0 auto;
  background-color: #eacf6b;
  padding: 30px;
  width: 50vw;
  text-align: center;
  display: flex;
  justify-content: center;
}
.write {
  margin-right: 5vw;
  width: 100px;
  height: 100px;
  background-color: #fff;
  border: 5px solid #000;
  border-radius: 20px;
}
.write:hover {
  background-color: #000;
  border: 5px solid #fff;
}
.write:hover ~ .black {
  background-color: #fff;
  border: 5px solid #000;
}
.black {
  margin-left: 5vw;
  width: 100px;
  height: 100px;
  background-color: #000;
  border: 5px solid #fff;
  border-radius: 20px;
}
.black:hover {
  background-color: #fff;
  border: 5px solid #000;
}
.w_b:has(.black:hover) .write {
  background-color: #000;
  border: 5px solid #fff;
}

<div class="w_b">
  <div class="write"></div>
  <div class="black"></div>
</div>

Можно пойти более "костыльным" путём, через pointer-events:

.w_b {
  margin: 0 auto;
  background-color: #eacf6b;
  padding: 30px;
  width: 50vw;
  text-align: center;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.w_b > * { pointer-events: auto; }
.w_b:hover .write:not(:hover) {
  background-color: #000;
  border: 5px solid #fff;
}
.write {
  margin-right: 5vw;
  width: 100px;
  height: 100px;
  background-color: #fff;
  border: 5px solid #000;
  border-radius: 20px;
}
.write:hover {
  background-color: #000;
  border: 5px solid #fff;
}
.write:hover ~ .black {
  background-color: #fff;
  border: 5px solid #000;
}
.black {
  margin-left: 5vw;
  width: 100px;
  height: 100px;
  background-color: #000;
  border: 5px solid #fff;
  border-radius: 20px;
}
.black:hover {
  background-color: #fff;
  border: 5px solid #000;
}

<div class="w_b">
  <div class="write"></div>
  <div class="black"></div>
</div>

БЛОГ НА HUSL

Как обратиться к элементу до элемента?

Ответы (1 шт):