Переместить родительский div с дочерним div?

Question

Эй, ребята, я новичок в CSS и HTML, и у вас есть довольно простой вопрос для вас.

В настоящее время я пытаюсь переместить родительский элемент div из экрана в экран при наведении на него одного дочернего элемента, расположенного в правой части экрана. Но почему-то я не могу заставить его работать, возможно ли вообще переместить родительский div при наведении курсора на дочерний div? Или что я тут не так сделал?

body {
  overflow:hidden;
}

.border {
  width: 500px;
  height: 300px;
  position:absolute;
  left: 97%;
}

.left {
  float:left;
  width: 50px;
  height: 300px;
  margin-top: 20px;
}

.right {
  float:left;
  width: 450px;
  height: 300px;
  background-color: grey;
}

.hoverbtn {
  background-color: black;
  width: 50px;
  height: 50px;
  color: white;
  padding-left: 50%;
  padding-top: 50%;
}

.hoverbtn:hover + .border {
  left: 80%;
}


<div class="border">
  <div class="left">
    <div class="hoverbtn">
      <
    </div>
  </div>
  <div class="right">
  </div>
</div>

Заранее спасибо!

Answer 1

Используя только CSS, вы не можете влиять на стиль родителей, основанный на псевдоклассе ребенка (:hoverи т. д.)

.hoverbtn:hover + .border {
  left: 80%;
}

будет стиль элемента родного брата, а не родитель

Нет родительского символа, как есть ребенок (>) символ, так что вы не можете как сделать

.hoverbtn:hover < .border {
  left: 80%;
}

Хотя люди просили, чтобы был такой родительский символ, как < или псевдо класс, как :parent

Таким образом, вам нужно использовать JavaScript для достижения этой цели.