87

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

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

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

4

7 に答える 7

198

これには 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>

于 2009-09-22T20:58:17.590 に答える
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でもテストしたい場合があります（そこで動作するかどうかはわかりません）。

于 2009-09-22T20:38:25.273 に答える
9

最良の選択肢は、両方の 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>
于 2009-09-22T21:03:46.053 に答える
7

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

<div クラス="セクション ">

<div class="image"><img src="myImage.jpg" onmouseover=".layer {border: 1px ベタ黒;} .image {border: 1px ベタ黒;}" /></div>

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

</div>

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

于 2009-09-22T20:30:32.730 に答える
2

これを実現するには、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を調整してください:)

于 2009-09-22T20:26:36.310 に答える
0

また

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

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

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

しかし、あなたは使用できません

.layer:hover + .image {
  background-color: #0CF;
}
于 2013-09-09T11:45:26.707 に答える