3

これは私を狂わせているので、誰かの助けに本当に感謝しています!

したがって、次の 2 つの画像が隣り合って配置されており、ページ全体のさまざまな場所で使用されています。

<img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
<img class="curtain containerRight" src="http://example.com/containerright.jpg" />

私が必要とするのは、.lefthover または .righthover のクラスが左または右のコンテナーに同時に追加され、マウスアウト時に再び削除されるように、2 つの画像のいずれかにカーソルを合わせるときです。したがって、ホバー時のコードは次のようになります。

<img class="curtain containerLeft lefthover" src="http://example.com/containerleft.jpg" />
<img class="curtain containerRight righthover" src="http://example.com/containerright.jpg" />

マウスアウトでこれに戻ります：

<img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
<img class="curtain containerRight" src="http://example.com/containerright.jpg" />

ページ上のこれらの画像のすべてのインスタンスにレフトホバーとライトホバーを適用したくありません - マウスオーバーした2つだけです。

私は近づいて多くのことを試しましたが、画像のすべてのインスタンスに適切なクラスを追加するか、ホバーした画像のみを取得することができます (その隣の画像ではありません.

また、同じ div で別のクラスを選択する方法がわかりません (.c​​hildren を使用して選択できますが、このインスタンスでは適切ではありません)。だから私はこれが例えばうまくいくかもしれないと思った：

$('.curtain')
.hover(function() {
    $(".containerLeft", this).addClass('lefthover');
    $(".containerRight", this).addClass('righthover');
}, function() {
    $(".curtainLeft", this).removeClass('lefthover');
    $(".containerRight", this).removeClass('righthover');
});

アイデアや考えはありますか？

4

4 に答える 4

3

純粋なCSSが機能する場合は、一般的にJavaScriptを避けるのが最善です。:hoverこの場合、疑似クラスを使用できるため、最初からJavaScriptは必要ないようです。

/* Normal Styles */
.containerLeft { 
    background-color: red; 
}
.containerRight { 
    background-color: blue; 
}

/* Hover Styles */
.container:hover .containerLeft,
.container:hover .containerRight {
    background-color: yellow;
}

デモ： http： //jsfiddle.net/xYgm6/2/

それぞれに異なるスタイルが必要な場合：

.container:hover .containerLeft {
    border: 1px solid red;
}
.container:hover .containerRight {
    border: 1px solid blue;
}

デモ： http： //jsfiddle.net/xYgm6/3/

于 2012-11-14T20:47:57.073 に答える
1

class container画像が..でdiv内に囲まれていることを考慮してください。

HTML

<div class="container">
    <img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
    <img class="curtain containerRight" src="http://example.com/containerright.jpg" /> 
</div>
<div class="container">
    <img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
    <img class="curtain containerRight" src="http://example.com/containerright.jpg" /> 
</div>
<div  class="container">
    <img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
    <img class="curtain containerRight" src="http://example.com/containerright.jpg" /> 
</div>

Javascript

$('.curtain').hover(function() {
    var $container = $(this).closest('div.container');
    $container.find('.containerLeft').addClass('lefthover');
    $container.find('.containerRight').addClass('righthover');
}, function() {
    var $container = $(this).closest('div.container');
    $container.find('.containerLeft').removeClass('lefthover');
    $container.find('.containerRight').removeClass('righthover');
});​

フィドル

于 2012-11-14T20:56:29.417 に答える
0

画像のすべてのペアが異なる親を持つと仮定します。両方の画像は兄弟です。

$('.containerLeft').parent().hover(function() {
    $(".containerLeft", this).addClass('lefthover');
    $(".containerRight", this).addClass('righthover');
}, function() {
    $(".containerLeft", this).removeClass('lefthover');
    $(".containerRight", this).removeClass('righthover');
});
于 2012-11-14T20:45:39.997 に答える
0

ありがとう

ページ上に複数の同一のクラスがあり、毎回正しい 2 つの画像のみをターゲットにする方法があるため、純粋な CSS オプションが機能するとは思いません。とにかく、参照のために、機能するjQueryもいくつか修正しました：

$('.containerLeft').hover(function() {
    $(this).addClass('lefthover');
    $(this).next().addClass('righthover');   
}, function() {
    $(this).removeClass('lefthover');
    $(this).next().removeClass('righthover');   
});

$('.containerRight').hover(function() {
    $(this).prev().addClass('lefthover');        
    $(this).addClass('righthover');
}, function() {
    $(this).removeClass('righthover');
    $(this).prev().removeClass('lefthover'); 
});

おそらく、さらに単純化される可能性があります。

皆さんの回答に本当に感謝しています - ありがとう！

于 2012-11-14T21:49:02.543 に答える