0

HTMLコード

<div class="box">
<p class="turn">shou</p>
</div>

CSSコード

.turn {
    font-size: 50px;
    text-align:center;
    padding:150px;
    color: white;
}
.box {
    height:500px;
    width:500px;
    background-color: blue
}
.box:hover ~ .turn {
    color: red;
}

jsfiddle

したがって、私のロジックを使用すると、div「ボックス」テキストにカーソルを合わせた後、赤くなるはずです。なぜそれが起こらないのか、私にはよくわかりません。

4

7 に答える 7

1

~一般的な兄弟コンビネータです。.turnは の兄弟ではない.boxため、スタイルは適用されません。

あなたが使用することができます.box:hover .turn

于 2013-10-21T13:31:30.717 に答える
1

間違ったセレクターを使用しています:

これはうまくいきます！

.box:hover > .turn {
  color: red;
}
于 2013-10-21T13:31:55.277 に答える
0

~CSS セレクターは兄弟セレクターと呼ばれます。

マークアップ (HTML) が次のような場合:

<div class="box">
</div>
<p class="turn">shou</p>

DOM ツリーでは、<p>ノードはノードの兄弟であるため、CSS は完全に機能し<div>ます。

上記の HTML の DOM ツリー:

     <document-root>
            |
            |
     _______|_______
    |              |
  <div>           <p>

しかし、マークアップでは、<p>要素は実際には の子ノードです<div>。DOM ツリーは次のようになります。

     <document-root>
            |
            |
          <div>
            |
            |
           <p>

したがって、は直接の子であるため、子セレクター を使用する必要があります。または、 と の間にスペースを残すこともできます(これは子孫セレクターです)。><p>.box.turn

したがって、最終的な CSS は次のようになります。

.turn {
    font-size: 50px;
    text-align:center;
    padding:150px;
    color: white;
}
.box {
    height:500px;
    width:500px;
    background-color: blue
}
.box:hover .turn {
    color: red;
}

更新されたフィドル: http://jsfiddle.net/sH3Dh/7/

于 2013-10-21T13:59:47.177 に答える