多個DIV懸停在點擊問題

我有多個DIV，每個都包含一個活動傳單。懸停後，我想顯示事件名稱和詳細信息，並且可以點擊事件列表。這適用於第一個列出的事件，但以下都不是。我有以下Javascript代碼和DIV結構。該頁面位於http://midnightguru.com/events_concept.php以供參考。多個DIV懸停在點擊問題

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#event_main").mouseenter(function() { 
     $("#event_hover").show(); 
     }).mouseleave(function() { 
     $("#event_hover").hide(); 
     }); 
    }); 
</script> 
<div id="event_main"></div><div id="event_hover"></div>

任何幫助表示讚賞！我努力搜索，無法弄清楚這一點！

來源

2012-06-11 Mike Barbaro

嘗試使用具有事件詳細信息的div的唯一ID。 Paulo Bueno有一個很好的建議。 – Andreas

只需要添加已經提供的答案，如果您查看頁面的源代碼，就可以在頁面上多次定義「mouseenter」和「mouseleave」。你只需要像Paulo一樣使用課程來完成它。 –

它正在匹配的第一個項目，因爲jQuery選擇

$（「＃event_main」）

實際上只匹配你的第一個事件的div，即使他們都有一個id爲event_main。

的＃選擇將只匹配一個元素：http://api.jquery.com/id-selector/

您將要使用其他一些jQuery選擇相匹配的元素，因爲所有這些div有event_main的ID。（也許你的意圖是利用event_main作爲申報單類，然後使用.event_main作爲選擇？）

來源

2012-06-11 22:02:13 hmqcnoesy

好，

首先，該ID道具必須用於識別對象的單個實例。

所以，而是使用一個類的div元素，並做一些事情，如：

$('.event_main').mouseenter(function(){ 
     $(this).find('.event_hover').show(); 
    }).mouseleave(function(){ 
     $(this).find('.event_hover').hide(); 
    }); 
}); 

<div class='event_main'> 
    ... 
    <div class="event_hover" style="display: none;"> 
     ... 
    </div> 
</div>

編輯：另外，穿上的$（document）該腳本。就緒一次對所有的頁面，好嗎？

來源

2012-06-11 22:03:03

多個DIV懸停在點擊問題

回答

相關問題