Question

以下是用于显示和隐藏页脚横幅的代码。除了MouseOver外，Everthing工作正常。

MouseOver确实有效（当触发它时会显示该区域的高亮显示）但是用户点击该区域时，突出显示消失但是当用户退出该区域时突出显示闪烁，因为它再次触发后点击退出

因此，在同一区域中单击后，似乎会重置mouseenter / mouseleave代码。

即使点击后，如何防止再次触发此事件？三江源。

// Hide the Footer
$(document).on('click','div#fixedPageFooterShown', function() {hideFooterBanner();});


// Highlight Footer MouseOver
$(document).on('mouseenter','div.fixedPageFooterDisplay', function() {
        $('img.bannerBottomMouseOver').show();
    }).on('mouseleave','div.fixedPageFooterDisplay', function () {
        $('img.bannerBottomMouseOver').hide();
});


// Hide Footer Banner Function
function hideFooterBanner() {
    $('div#fixedPageFooter').fadeOut('fast', function () {
        $('div#fixedPageFooterClosed').fadeIn('fast');
        $('img.bannerBottomMouseOver').fadeOut('fast');
        $('img#footerArrowMin').hide();
        $('img#footerArrowMax').show();
    });
}


// Show Footer Banner Function
$(document).on('click','div#fixedPageFooterClosed', function() {
    $(this).fadeOut('fast', function () {
        $('div#fixedPageFooter').fadeIn('fast');
        $('img.bannerBottomMouseOver').fadeOut('fast');
        $('img#footerArrowMax').hide();
        $('img#footerArrowMin').show();
    });
});

Answer 1

我不确定什么不适用，如果你展示html布局可以提供更多帮助

我认为您可以使用event.preventdefault()来阻止默认事件：

// Hide the Footer


// Highlight Footer MouseOver
//i'll change here to be more jquery'ish - not need on() i think as it replacemement for live()

$('div.fixedPageFooterDisplay').bind('mouseenter', function() {
    $('img.bannerBottomMouseOver').show();
}).bind('mouseleave', function() {
    $('img.bannerBottomMouseOver').hide();
});


// Hide Footer Banner Function
var hideFooterBanner = function(event) {
    //prevent default event handler
    if (event !== undefined) {
        event.preventdefault();
    }

    $('div#fixedPageFooter').fadeOut('fast', function() {
        $('div#fixedPageFooterClosed').fadeIn('fast');
        $('img.bannerBottomMouseOver').fadeOut('fast');
        $('img#footerArrowMin').hide();
        $('img#footerArrowMax').show();
    });
};

//i'll change here to be more jquery'ish
$('div#fixedPageFooterShown').click(hideFooterBanner);


// Show Footer Banner Function
//i'll change here to be more jquery'ish
$('div#fixedPageFooterClosed').click(function(event) {

    //prevent default event handler     
    event.preventdefault();

    $(this).fadeOut('fast', function() {
        $('div#fixedPageFooter').fadeIn('fast');
        $('img.bannerBottomMouseOver').fadeOut('fast');
        $('img#footerArrowMax').hide();
        $('img#footerArrowMin').show();
    });
});

JQUERY - MouseEnter / Focus / Hover / Blur

1 个答案: