0

<span>ロールオーバー イベントに基づいてを表示および配置しています。ロールオーバーは、不透明度の変更もトリガーしています。非表示の要素が表示され、この要素をスクロールすると、不透明度クラスが削除されることを除いて、すべてがうまく機能しています。

したがって、以下のフィドルでは、「Hello」要素をロールオーバーすると、背景画像の不透明度が削除されます。

マークアップを変更することはできないため、jQuery がすべての作業を行う必要があります。

ありがとう！

http://jsfiddle.net/W3wEd/

$('.campaign-1').on('mouseenter', function(){
    $(this).addClass('campaign-hover');
    updateHover();
});
$('.campaign-1').on('mouseleave', function(){
    $('.campaign-hover').removeClass('campaign-hover');
    updateHover();
});
$('.cta').on('mouseenter', function(){
    $(this).addClass('cta-hover');
    updateHover();
});
$('.cta').on('mouseleave', function(){
    $(this).removeClass('cta-hover');
    updateHover();
});

function updateHover() {
 if ($('.campaign-1').hasClass('campaign-hover') || $('.cta').hasClass('cta-hover'))
   {
    $('.cta').show();        
 } else {
    $('.cta').hide();
 }

 };
4

4 に答える 4

0

編集:最もクリーンなソリューションは CSS です。マークアップを変更できない場合は、jQuery を使用してマークアップを動的に変更することができます (それが許容できる場合)。http://jsfiddle.net/W3wEd/6/を参照してください。

.someClass:hover .someDescendentClass { /* set some style */ }

乾杯、

アンディ

于 2013-10-04T21:19:11.607 に答える