私のホバリング問題の方法を探しています。CSS：1つの要素をホバーし、複数の要素にエフェクトを適用しますか？
<div class="section">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
ここで、両方のクラス（画像とレイヤー）には境界線があり、どちらも標準とホバーの色が異なります。 レイヤークラスをホバリングするとレイヤーと画像クラスの境界線の色が両方ともアクティブになりますか？そしてその逆は？
これには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>これを行うには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のを調整します:)
ニース、本当にいいです！ 同じクラス名のセクションが複数ある場合はどうなりますか？今私は4つの同じクラス名のためにそれを試しました。 すべてのセクションの前にランニングナンバーを付ける必要がありますか？ jqueryはanykindをワイルドカードでサポートしていますか？ （おお、私はちょうどそれを試してみました！）） ありがとう。 – Marko
をこれは達成することは困難ではありませんが、JavaScriptのonmouseover機能を使用する必要があります。擬似スクリプト：
<div class="section ">
<div class="image"><img src="myImage.jpg" onmouseover=".layer {border: 1px solid black;} .image {border: 1px solid black;}" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
独自の色を使用してください。 mouseoverコマンドでjavascript関数を参照することもできます。
これは... 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ソリューションがあります。 ;） –
私はあなたのための最良のオプションは、別の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>
OR
.section:hover > div {
background-color: #0CF;
}
をNOTE 親要素の状態は唯一の子の要素の状態 に影響を与えることができます。
.image:hover + .layer {
background-color: #0CF;
}
.image:hover {
background-color: #0CF;
}
ですが、できませんを使用
.layer:hover + .image {
background-color: #0CF;
}
おや、ここに勝者!! :)私は何かを持っている場合、私は知らなかった：ホバー、私は別の要素をwhitを続けることができます！ （何か：ホバリング秒）.. 日常的に何か新しいことを学ぶ..ありがとうx10 – Marko
私もこれを知りませんでした。ご協力いただきありがとうございます。 – fadedbee
2つのdiv（上にカーソルを置いて表示するもの）が同じ直下の親divにない場合はどうなりますか？ – bikashg