0

それぞれにイベント フライヤーを含む複数の 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 にすべてのページに対して 1 回だけ配置します。

GL

于 2012-06-11T22:03:03.290 に答える
1

jQuery セレクターが

$('#event_main')

すべてのイベント div の id がevent_main.

# セレクターは単一の要素のみに一致します: http://api.jquery.com/id-selector/

これらの div はすべて event_main の ID を持っているため、他の jQuery セレクターを使用して要素を照合する必要があります。(あなたの意図はevent_main、div のクラスとして使用.event_mainしてから、セレクターとして使用することでしたか?)

于 2012-06-11T22:02:13.587 に答える