Question

I have 5 flags for 5 countries. If anyone mouseover the flags, a respective div will be shown. If mouseout, the div will hide. If the flag is clicked, then i want to keep the div visible and disable the mouseout event. The following coding makes everything okay, but when someone clicks on the flag, then the previous flags don’t work but the next flags on click. If i click the last one flag first, then none of the previous flags work!!!

Please someone helps me.

Thanks for reading.

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

Working fiddle