1

次の HTML と CSS があるとします。

transitions2.html

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Transformations</title>
    <link rel="stylesheet" href="transitions2.css">
  </head>
  <body>
    <div class="wrap">
      <div class="box"></div>
    </div>
  </body>
</html>

transitionons2.css

.wrap {
  margin: 0 auto;
  padding: 15px;
  width: 850px;
  height: 300px;
  box-shadow: 0 0 20px rgba(0,0,0,.5);
}

.box {
  width: 25%;
  height: 200px;
  border-radius: 8px;
  background: #4682B4;
  -webkit-transition-duration: 1s;
}

.wrap:hover .box{
  background: #F08080;
  margin-left: 75%;
}

私の問題は、.wrap:hover で .box を選択する最後の宣言にあります。これはどのように作動しますか？.wrap も移動しないのはなぜですか? .box の親要素にマウスを合わせると、.box だけが移動します。この動作の原因は何ですか?

4

2 に答える 2

3

親が移動しないのは、実際には選択していないためです。コードは、ホバー イベントが発生したときにwrapnamedの子クラスを選択boxし、その要素に変更を加えます。

子の代わりに親を移動する場合は、子クラスの選択を削除するbox必要がありますが、見苦しい結果になります。上記のコードは期待どおりに機能しています。

ちなみに、コードは次のように書くこともできます。

.wrap:hover > .box 
{
    background: #F08080;
    margin-left: 75%;
}

私の意見では、何が起こっているのかをより明確に確認できますが、それが私の好みです。

于 2013-07-02T00:32:54.643 に答える
1

.wrap:hover .boxと言うのと同じです

にカーソルを合わせると、次のよう.wrapに.boxなります。

実際には `.wrap:hover > .box の方が少しわかりにくいと思いますが、それは私だけです。

SO POST - 別の例もあり、これも機能します。

ul:not(:hover)>li.active { background: black; }
ul>li.active:not(:hover) { background: none; }
This has a few conditions:

A browser which supports the :not pseudo-tag
The ul must not have too much padding or empty space, otherwise you could activate the :hover of the ul without hovering over any list.
于 2013-07-02T01:49:43.260 に答える