2

画像の上にカーソルを合わせると、テキストのブロックが画像の上に表示されるサイトがあります。

カーソルが画像上の新しいテキスト要素の上にある場合、すべてがちらつき始めるという事実を除いて、望ましい効果が得られます。

どんな助けでも大歓迎です。

これがフィドルです： http://jsfiddle.net/aRSw2/

Here's the JS:

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

3 に答える 3

3

あなたをspanあなたのセクションに入れてください。mouseenterleave

<section class="campaign-1">
<a href="#"><img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png"/></a>
<span class="cta"> Hello </span>
</section>

デモ: http://jsfiddle.net/aRSw2/2/

于 2013-10-04T16:14:32.617 に答える
1

@tymeJVが言ったことは真実ですが、特定のシナリオでは同じことができない場合があります.

したがって、次のことを試してください

$('.campaign-1,a').on('mouseenter', function(){
        $(this).addClass('campaign-hover'); 
        $('.cta').show();   
});

フィドルを更新しました

于 2013-10-04T16:17:57.917 に答える
1

問題は、新しいテキスト要素にカーソルを合わせると、その要素がフォーカスを受け取り、そのcampaignセクションがフォーカスを失うことです (その結果、テキストがフォーカスを失い、キャンペーンが再びそれを取得し、テキストが再表示されます)。

キャンペーン要素またはテキスト要素のいずれかの上にマウスが置かれている間、テキスト ポップアップが表示されたままになるように、コードを変更します。

Fiddle の更新は次のとおりです: 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();
    } 
};
于 2013-10-04T16:20:59.143 に答える