html - 将父 div 与子 div 一起移动？

Question

大家好，我是 css 和 html 的新手，并且有一个非常简单的问题。

我目前正在尝试将我的父 div 从屏幕外移动到屏幕内当悬停它的一个 child 时，它位于屏幕的右侧。但不知何故我无法让它工作，甚至可以在悬停子 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来完成这个。