Question

我有5个国家的5面旗帜。如果有人将鼠标悬停在标志上，则会显示相应的div。如果是mouseout，div会隐藏。如果单击该标志，那么我想保持div可见并禁用mouseout事件。以下编码使一切正常，但是当有人点击该标志时，之前的标志不起作用，但点击下一个标志。如果我先点击最后一个标志，那么之前的标志都不起作用！

请有人帮助我。

感谢阅读。

    <!-- popup UN -->
<div class="popup popup_hide popup_un" id="popup_un">
    <div class="popup_top"></div>
    <div class="popup_country">
        <img src="images/usa.gif" alt="USA">  
        <a href="#" class="hide_popup"><span class="close"></span></a>
        <div class="popup_country_text"> 
            <div class="popup_country_text_normal">  
            </div>
            <div class="btn_email_us"><a href="#"><img src="images/btn_email.jpg" alt="email us"></a></div>
        </div>
    </div>
</div> 


 <div id="footer_flag">
<a href="#" class="showPopup showPopupClicked" rel="popup_au"><img id="popup_au_img" src="images/au.gif" alt="AU"></a>
<a href="#" class="showPopup showPopupClicked" rel="popup_nz"><img id="popup_nz_img" src="images/nz.gif" alt="AU"></a>
<a href="#" class="showPopup showPopupClicked" rel="popup_uk"><img id="popup_uk_img" src="images/uk.png" alt="UK"></a>
<a href="#" class="showPopup showPopupClicked" rel="popup_canada"><img id="popup_canada_img" src="images/canada.png" alt="Canada"></a>
<a href="#" class="showPopup showPopupClicked" rel="popup_usa"><img id="popup_usa_img" src="images/usa.gif" alt="USA"></a>
<a href="#" class="showPopup showPopupClicked" rel="popup_un"><img id="popup_un_img" class="footer_flag_un" src="images/un.png" alt="UN"></a>

$(document).ready(function(){

    $('.showPopup').mouseover( function() {
        $('.popup').hide();
        $('#' + $(this).attr('rel')).show()  
    });


    $('.showPopup').mouseout( function() {
        $('.popup_hide').hide(); 

    });             

    $('.hide_popup').click( function() {
        $('.popup').hide(); 
        $('img').removeClass('border_grey'); 

    });


    $('.showPopupClicked').click( function() {
        $('a').removeClass('showPopup');
        $('img').removeClass('border_grey');
        $('.' + $(this).attr('rel')).removeClass('popup_hide');
        $('#' + $(this).attr('rel') + '_img').addClass('border_grey');

    }); 
});

Answer 1

CODE：

var mouseOver = function() {
    //$('.popup').hide();
    $('#' + $(this).attr('rel')).show();
};

var mouseOut = function() {
    //$('.popup').hide();
    $('#' + $(this).attr('rel')).hide();
};

$('.showPopup').mouseover(mouseOver);
$('.showPopup').mouseout(mouseOut);

$('.showPopup').click(function() {
    $('#' + $(this).attr('rel') + '_img').removeClass('border_grey');
    if ($(this).hasClass("selected")) {
        $('#' + $(this).attr('rel')).hide();
        $(this).removeClass("selected");

        $(this).bind("mouseover", mouseOver);
        $(this).bind("mouseout", mouseOut);
    } else {
        $(this).addClass("selected");
        $('#' + $(this).attr('rel') + '_img').addClass('border_grey');
        $('#' + $(this).attr('rel')).show();

        $(this).unbind("mouseover", mouseOver);
        $(this).unbind("mouseout", mouseOut);
    }
});

工作fiddle

Answer 2

尝试$('#' + $(this).attr('rel') + '_img').show()

此外，实际上没有任何课程.popup，所以我不确定$('.popup').hide();完成了什么。

简单的jQuery鼠标悬停，mouseout，单击脚本

2 个答案: