0

我有多个 DIV，每个 DIV 都包含一个活动传单。悬停后，我想显示事件名称和详细信息，并能够单击事件列表。这适用于第一个列出的事件，但不适用于以下事件。我有以下 Javascript 代码和 DIV 结构，如下所述。该页面位于http://midnightguru.com/events_concept.php以供参考。

<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>

任何帮助表示赞赏！我已经努力搜索，无法弄清楚这一点！

4

2 回答 2

2

出色地，

首先，必须使用 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).ready 上只对所有页面进行一次，好吗？

升

于 2012-06-11T22:03:03.290 回答
1

它正在处理匹配的第一个项目，因为 jQuery 选择器

$('#event_main')

实际上只匹配您的第一个事件 div，即使它们的 id 都是event_main.

# 选择器将仅匹配单个元素：http: //api.jquery.com/id-selector/

您将需要使用其他一些 jQuery 选择器来匹配元素，因为所有这些 div 的 id 都是 event_main。（也许您的意图是event_main用作 div 的类，然后.event_main用作选择器？）

于 2012-06-11T22:02:13.587 回答