1

嘿伙计们，我对 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>

提前致谢！

4

1 回答 1

0

例如，仅使用 css 不能影响基于孩子的伪类（:hover等）的父母样式

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

将样式化兄弟元素而不是父元素

没有父符号，就像有一个 child( >) 符号，所以你不能喜欢做

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

尽管人们要求有一个父符号<或伪类:parent

所以你需要使用javascript来完成这个。

于 2013-09-07T11:07:19.720 回答