2

クラスの要素に.parentカーソルを合わせると、クラスの子要素が検索.childされ、CSSが適用されます。

これがjsFiddleです

純粋にCSSでこの効果を達成することは可能ですか？

html：

<div class="parent" style="background:red;margin:20px;padding:20px;">
    <div class="child" style="background:blue;margin:20px;padding:20px;"></div>
</div>

<div class="parent" style="background:red;margin:20px;padding:20px;">
    <div class="child" style="background:blue;margin:20px;padding:20px;"></div>
</div>​

jQuery：

$('.parent').hover(
  function () {
    $(this).find('.child').css('background','yellow');
  }, 
  function () {
    $(this).find('.child').css('background','blue');
  }
);​
4

4 に答える 4

5

インラインスタイルを削除し、以下をスタイルシートに入れます。 

/* CSS */
.parent { background: red; margin: 20px; padding: 20px; }
.child {background blue; margin: 20px; padding: 20px;}
.parent:hover > .child { background: yellow; }
于 2012-08-24T23:28:04.310 に答える
2

うん。

.parent .child {
    background: blue;
}

.parent:hover .child {
    background: yellow;
}

これは、jQueryの効果を再現します。文字通り「子」を意味する場合（実際に見つけているのは子孫ではありません）、次のようにします。

.parent > .child {
    background: blue;
}

.parent:hover > .child {
    background: yellow;
}

@hobbsが指摘しているように、これはIE 6では機能しません。これは、:hoverIE6のリンクでのみサポートされているためです。

于 2012-08-24T23:29:07.913 に答える
2

はい。ただし、宣言を使用する必要がないように、インラインスタイルもクラスに移動する必要があります!important（そうしないと、インラインスタイルが常にスタイルシートを上書きします）。

<div class="parent">
    <div class="child"></div>
</div>

<div class="parent">
    <div class="child"></div>
</div>​

.parent {
    background: red;
    margin: 20px;
    padding: 20px;
}
.child {
    background: blue;
    margin: 20px;
    padding: 20px;
}
.parent:hover .child {
    background: yellow;
}

jsFiddleを参照してください。

于 2012-08-24T23:29:37.697 に答える
1 
.parent .child {
    background: blue;
}

.parent:hover .child {
    background: yellow;
}

:hover要素でのみ機能するIEのバージョンを除いて、仕事をする必要がありAます（jQueryはこれを回避しますが、CSSは機能しません）。

于 2012-08-24T23:28:34.577 に答える