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来完成这个。

用子div移动父div？

1 个答案: