親がホバーされたときに子要素のCSSを変更する

159

まず、これはCSS3には複雑すぎると思いますが、どこかに解決策がある場合は、代わりにそれを使いたいと思います。

HTMLは非常に単純です。

<div class="parent">
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <div class="child">
        Text Block 2
    </div>
</div>

子divはdisplay：noneに設定されています。デフォルトでは、表示に変更されます：ブロック; マウスが親divの上に置かれたとき。問題は、このマークアップが私のサイトのいくつかの場所に表示され、マウスが親の上にある場合にのみ子を表示し、マウスが他の親の上にある場合は表示しないようにすることです（すべて同じクラスを持っています）名前とIDなし）。

私が使って試してみた$(this)と.children()無駄に。

$('.parent').hover(function(){
            $(this).children('.child').css("display","block");
        }, function() {
            $(this).children('.child').css("display","none");
        });
jquery  css  jquery-selectors  parent 
— ハートレイ・ブロディ
ソース

回答:

260

CSSを使用しないのはなぜですか？

.parent:hover .child, .parent.hover .child { display: block; }

次に、：hoverを適切にサポートしないIE6のJS（たとえば、条件付きコメント内）を追加します。

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

ここに簡単な例があります：フィドル

— スティーブン
ソース
そのコードは私にはうまくいきません。「.parent：hover」ではなく「.parent.hover」と言うべきですか？あなたが今持っているものを見たことがない場合。そしてコンマは同じスタイルを取る複数のセレクターを示していませんか？ここでどのように役立つかわかりません。そのCSSについてのもう少し詳しい情報、お気に入り0 =]
— Hartley Brody
6
:hoverCSS2によって定義された「動的疑似クラス」の1つです（仕様は次のとおりです）。ここに簡単な例があります：http : //jsfiddle.net/5FLr4/。わたしにはできる。
— リー
ああ、どうもありがとう！私は実際には、子テキストをビューの外に押し出す相対的な配置がありました... >。<私は助けに感謝します！
— Hartley Brody、
子要素内のスクロールバーのハイライトを変更したい場合、これは.child ::-webkit-scrollbar-thumbでは機能しないようです。
— thdoan
1
.parent:not(:hover) .child { display: none; }IE6については心配していませんが、私にとってはうまく機能しているようです。しかし、このようにして、均一なdisplayプロパティを持たせたくない要素に使用できます。
— Blair Connolly
9

を使用しtoggleClass()ます。

$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});

どこ colorクラスはですか。必要な動作を実現するために、クラスを好きなようにスタイルできます。この例は、マウスが出入りしたときにクラスが追加および削除される方法を示しています。

ここで動作例を確認してください。

— フセイン
ソース
3

スティーブンの答えは正しいですが、ここに彼の答えの私の適応があります：

HTML

<div class="parent">
    <p> parent 1 </p>
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <p> parent 2 </p>
    <div class="child">
        Text Block 2
    </div>
</div>

CSS

.parent { width: 100px; min-height: 100px; color: red; }
.child { width: 50px; min-height: 20px; color: blue; display: none; }
.parent:hover .child, .parent.hover .child { display: block; }

jQuery

//this is only necessary for IE and should be in a conditional comment

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

この例がjsFiddleで機能しているのを見ることができます。

— ロジャー・ロエロフス
ソース
3

2つまたは3つだけでなく、必要なだけ多くのレベルにスケーラブルであるため、私はより良いソリューションであると私が思うものを持っています。

私はボーダーを使用していますが、背景色など、必要なスタイルを使用してそれを行うこともできます。

国境でのアイデアは：

  • 境界線の色を1つのdivだけに変更します。つまり、マウスが親ではなく、子ではない場所にあるdivであるため、残りの部分は白のままで、そのようなdiv境界線だけが別の色で表示されます。

あなたはそれをテストすることができます：http：//jsbin.com/ubiyo3/13

そしてここにコードがあります：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hierarchie Borders MarkUp</title>
<style>

  .parent { display: block; position: relative; z-index: 0;
            height: auto; width: auto; padding: 25px;
          }

  .parent-bg { display: block; height: 100%; width: 100%; 
               position: absolute; top: 0px; left: 0px; 
               border: 1px solid white; z-index: 0; 
             }
  .parent-bg:hover { border: 1px solid red; }

  .child { display: block; position: relative; z-index: 1; 
           height: auto; width: auto; padding: 25px;
         }

  .child-bg { display: block; height: 100%; width: 100%; 
              position: absolute; top: 0px; left: 0px; 
              border: 1px solid white; z-index: 0; 
            }
  .child-bg:hover { border: 1px solid red; }

  .grandson { display: block; position: relative; z-index: 2; 
              height: auto; width: auto; padding: 25px;
            }

  .grandson-bg { display: block; height: 100%; width: 100%; 
                 position: absolute; top: 0px; left: 0px; 
                 border: 1px solid white; z-index: 0; 
               }
  .grandson-bg:hover { border: 1px solid red; }

</style>
</head>
<body>
  <div class="parent">
    Parent
    <div class="child">
      Child
      <div class="grandson">
        Grandson
        <div class="grandson-bg"></div>
      </div>
      <div class="child-bg"></div>
    </div>
    <div class="parent-bg"></div>
  </div>
</body>
</html>
— z666zz666z
ソース
これは質問が尋ねたことをしません。ホバーされた要素の周囲の境界を変更します。子要素の周囲の境界線ではありません。
— jenniwren
2

ドロップダウンメニューにTwitter BootstrapスタイリングとベースJSを使用している場合：

.child{ display:none; }
.parent:hover .child{ display:block; }

これはスティッキードロップダウンを作成するための欠けている部分です（それは迷惑ではありません）

  • 動作は次のとおりです。
    1. クリックしたときに開いたままにし、ページの他の場所でもう一度クリックしたときに閉じる
    2. マウスがメニューの要素の外にスクロールすると自動的に閉じます。
— Rトービン
ソース
2

これを行うのに恐ろしい理由があるかどうかはわかりませんが、Chrome / Firefoxの最新バージョンでは、ページ上の多くの要素で目に見えるパフォーマンスの問題がなく、問題なく動作するようです。

*:not(:hover)>.parent-hover-show{
    display:none;
}

しかし、この方法では、必要なのはparent-hover-show要素に適用するだけで、残りは処理され、常に「ブロック」したり、タイプごとに複数のクラスを作成したりせずに、必要なデフォルトの表示タイプを維持できます。

— ブライアンリーシュマン
ソース
0

CSSから変更するには、子クラスを設定する必要さえありません

.parent > div:nth-child(1) { display:none; }
.parent:hover > div:nth-child(1) { display: block; }
— hamboy75
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.