これは私を狂わせているので、誰かの助けに本当に感謝しています!
したがって、次の 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 で別のクラスを選択する方法がわかりません (.children を使用して選択できますが、このインスタンスでは適切ではありません)。だから私はこれが例えばうまくいくかもしれないと思った:
$('.curtain')
.hover(function() {
$(".containerLeft", this).addClass('lefthover');
$(".containerRight", this).addClass('righthover');
}, function() {
$(".curtainLeft", this).removeClass('lefthover');
$(".containerRight", this).removeClass('righthover');
});
アイデアや考えはありますか?