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

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

请别人帮我。

感谢您的阅读。

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

    }); 
});

]

来源

2012-10-30 Nur

做ü有你的HTML吗？ –

$（'＃'+ $（this）.attr（'rel'））。show（）is wrong –

Right ..我认为他应该用'.'替换'#'或反过来 –

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

而且，没有什么实际上有.popup类，所以我不知道什么$('.popup').hide();完成。

来源

2012-10-30 06:43:30

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

来源

2012-10-30 08:57:56 bhb

你好bhb，感谢您的代码。你的代码很好，但仍然显示出一个问题。如果我点击任何标志，那么代码与以前的标志不起作用。如果我点击no 5标志，标志1-4不起作用。 – Nur

你是什么意思，它不起作用？它是否出现在小提琴链接（上图）中。 – bhb

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

回答

相关问题