簡單的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鼠標懸停，鼠標點擊腳本

回答

相關問題