web-dev-qa-db-ja.com

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

まず、これは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に設定されます。デフォルトでは、その後display：blockに変更されます。マウスが親divの上に置かれたとき。問題は、このマークアップが私のサイトのいくつかの場所に表示され、マウスが他の親のいずれかの上にある場合ではなく、マウスがその親の上にある場合にのみ子が表示されることです名前とIDなし）。

$(this)と.children()を使用してみましたが、役に立ちませんでした。

$('.parent').hover(function(){
            $(this).children('.child').css("display","block");
        }, function() {
            $(this).children('.child').css("display","none");
        });
jquerycssjquery-selectorsparent
144
Hartley Brody

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

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

次に、IEのJSを（たとえば、条件付きコメント内に）追加します。これは、：hoverを適切にサポートしていません。

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

以下に簡単な例を示します。 Fiddle

226
Stephen

JavaScriptやjqueryを使用する必要はありません。CSSで十分です。

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

SEE DEMO

129
Ali Adravi

toggleClass()を使用します。

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

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

作業例を確認してください here 。

8
Hussein
.parent:hover > .child {
    /*do anything with this child*/
}
6
Amir Rahman

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

私は境界線を使用していますが、背景色のような、どんなスタイルでも望みどおりにできます。

国境を越えて、アイデアは次のとおりです。

  • 境界線の色は1つのdivのみです。マウスが置かれているdivは、親でも子でもありません。したがって、残りは白のままで、そのようなdiv枠のみが異なる色で表示されます。

以下でテストできます： http://jsbin.com/ubiyo3/1

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

<!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>
3
z666zz666z

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

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での作業 。

2
Roger Roelofs

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

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

これは、スティッキードロップダウンを作成するために不足している部分です（面倒ではありません）

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

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

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

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

1
Brian Leishman

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

.parent > div:nth-child(1) { display:none; }
.parent:hover > div:nth-child(1) { display: block; }
0
hamboy75