CSS：1つの要素にカーソルを合わせると、複数の要素に影響しますか？

83

ホバリングの問題の方法を探しています。

<div class="section">

<div class="image"><img src="myImage.jpg" /></div>

<div class="layer">Lorem Ipsum</div>

</div>

現在、画像とレイヤーの両方のクラスに境界線があります。どちらもノーマルとホバーで色が異なります。それを作る方法はありますか？レイヤークラスをホバーすると、レイヤーと画像クラスの両方のホバーボーダーカラーがアクティブになりますか？そしてその逆？

css xhtml hover

— マルコ
ソース

188

これにはJavaScriptは必要ありません。

一部のCSSはそれを行います。次に例を示します。

<html>
  <style type="text/css">
    .section { background:#ccc; }
    .layer { background:#ddd; }
    .section:hover img { border:2px solid #333; }
    .section:hover .layer { border:2px solid #F90; }
  </style>
</head>
<body>
  <div class="section">
    <img src="myImage.jpg" />
    <div class="layer">Lorem Ipsum</div>
  </div>
</body>
</html>

スニペットを展開

— corymathews
ソース

12

さて、これが勝者です！:)私は何かを持っている場合：ホバー、私は別の要素でそれを続けることができることを知りませんでした！（何か：ホバー.second）..毎日あなたは何か新しいことを学びます..ありがとうx10

— マルコ

6

2つのdiv（ホバーするものと表示するもの）が同じ直接の親div内にない場合はどうなりますか？

— bikashg 2011年

3

必要なだけ構造を上に移動することも、両方の親になるアイテムを追加することもできます。ただし、共通点がない場合は、JavaScriptを使用する必要がある場合があります。

— corymathews 2011年

2

同じdivの別の子要素にカーソルを合わせたときに、divの1つの子要素を変更するにはどうすればよいですか？

— cos

ありがとう！私はjavascriptを使用していましたが、このCSSの方がうまくいきました。思ったより簡単なこともあります。

— yanike 2012年

11

これは、Firefox、Chrome、IE8で機能しました...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
    <head>
        <style type="text/css">
        div.section:hover div.image, div.section:hover div.layer {
            border: solid 1px red;
        }
        </style>
    </head>
    <body>
        <div class="section">
            <div class="image"><img src="myImage.jpg" /></div>
            <div class="layer">Lorem Ipsum</div>
        </div>
    </body>
</html>

...これをIE6でもテストすることをお勧めします（そこで機能するかどうかはわかりません）。

— スティーブワーサム
ソース

実際にはIE8で動作するようです。Doctypeを追加することで違いが生まれました。つまり、純粋なCSSソリューションです。;）

— Steve Wortham

10

あなたにとって最良の選択肢は、両方のdivを別のdivで囲むことだと思います。次に、CSSで次の方法で作成できます。

<html>
<head>
<style>
  div.both:hover .image { border: 1px solid blue }
  div.both:hover .layer { border: 1px solid blue }
</style>
</head>

<body>
<div class="section">

<div class="both">
  <div class="image"><img src="myImage.jpg" /></div>
  <div class="layer">Lorem Ipsum</div>
</div>

</div>
</body>
</html>

— ビリアム
ソース

8

これを実現するのは難しくありませんが、javascriptonmouseover関数を使用する必要があります。疑似スクリプト：

<div class = "section">

<div class = "image"> <img src = "myImage.jpg" onmouseover = "。layer {border：1px solid black;} .image {border：1px solid black;}" /> </ div>

<divclass = "layer">ローレムイプサム</ div>

</ div>

あなた自身の色を使用してください。mouseoverコマンドでjavascript関数を参照することもできます。

— eykanal
ソース

1

別の例として、要素1の代わりにクラスCSS変更を使用する場合は+1。

— DVK

これも機能しています、ありがとう！インラインコーディングはできるだけ避けようとしています。;）

— Marko

3

これを実現するにはJavaScriptを使用する必要があると思います。

jQuery：

$(function(){
   $("#innerContainer").hover(
        function(){
            $("#innerContainer").css('border-color','#FFF');
            $("#outerContainer").css('border-color','#FFF');
        },
        function(){
            $("#innerContainer").css('border-color','#000');
            $("#outerContainer").css('border-color','#000');
        }
    );
});

それに応じて値と要素IDを調整します:)

— brettkelly
ソース

いい、本当にいい！同じクラス名に対して複数のセクションがある場合はどうなりますか？今、私は4つの同じクラス名でそれを試しましたが、1つにカーソルを合わせると、すべてが変わりますか？すべてのセクションの前にランニング番号を付ける必要がありますか？jqueryはワイルドカードをサポートしていますか？（オーケー、私はちょうどそれのためのgoogleしてみてください！;））のおかげで...

— マルコ

0

または

.section:hover > div {
  background-color: #0CF;
}

注親要素の状態は子の要素状態にのみ影響するため、次のものを使用できます。

.image:hover + .layer {
  background-color: #0CF;
}
.image:hover {
  background-color: #0CF;
}

しかし、あなたは使用することはできません

.layer:hover + .image {
  background-color: #0CF;
}

— Jnr
ソース