1

やあみんな、CSS と html にかなり慣れていないので、とても簡単な質問があります。

現在、画面の右側にある親divの1つの子をホバリングするときに、親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

:hovercss のみを使用すると、たとえば、子の疑似クラス ( など) に基づいて親のスタイルに影響を与えることはできません。

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

親ではなく兄弟要素をスタイルします

child( ) シンボルがあるような親シンボルが>ないため、好きなことはできません

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

人々は親シンボルのようなもの<や疑似クラスのようなものがあることを要求しましたが:parent

したがって、これを実現するには JavaScript を使用する必要があります。

于 2013-09-07T11:07:19.720 に答える