简单jquerymouseover，mouseout，单击脚本

我有5个国家的5面旗帜。如果有人将鼠标移到标志上，将显示相应的div。如果鼠标离开，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>

]

试试

$（'#'+$（this.attr（'rel'）+''u img'）.show（）

另外，实际上没有类

.popup

，所以我不确定

$（'.popup'）.hide（）是什么完成。
代码：

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);
    }
});

工作
$（'#'+$（this.attr（'rel'））.show（）是错误的，我认为是正确的。。我补充道，我认为他应该用
替换
，或者用调试Hello Arun的Viceversafidle替换
html@ALL，这里的主要问题是，当有人单击“showPopupClicked”时，我想删除“showPopup”类，这样mousover的功能就不会与“showPopup”Hello bhb一起工作，谢谢你的代码。您的代码工作得很好，但仍然显示出一个问题。若我点击任何标志，那个么代码和前面的标志都不起作用。如果我点击5号标志，标志1-4不起作用。你说它不起作用是什么意思？它是否存在于小提琴链接（上图）中。
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);
    }
});