Question

我有多个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>

任何帮助表示赞赏！我努力搜索，无法解决这个问题！

Answer 1

好吧，

首先，ID prop必须用于标识对象的单个实例。

所以，相反，请使用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上，只对所有页面执行一次，好吗？

GL

Answer 2

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

$（ '＃event_main'）

实际上只匹配您的第一个事件div，即使它们都具有event_main的ID。

#selector只匹配一个元素：http://api.jquery.com/id-selector/

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

多个DIV悬停在点击问题上

2 个答案: