Несколько 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

попробуйте использовать уникальные идентификаторы для разделов с информацией о мероприятии. У Пауло Буэно есть хорошее предложение. – Andreas

Чтобы добавить к уже предоставленным ответам, если вы просмотрите источник своей страницы, у вас на вашей странице несколько раз указатель мыши и 'mouseleave'. Вам нужно только сделать это, используя классы, как продемонстрировал Пауло. –

Она работает по первому вопросу совпадают, так как селектор JQuery

$ («# event_main»)

фактически только соответствие первый из дивы событий, даже если они все имеют идентификатор event_main.

# селектор будет соответствовать только один элемент: http://api.jquery.com/id-selector/

Вы хотите использовать какой-либо другой селектор JQuery, чтобы соответствовать элементам, потому что все эти дивы иметь идентификатор event_main. (Может быть, ваше намерение было использовать event_main как класс дивы, а затем использовать .event_main как селектор?)

источник

2012-06-11 22:02:13 hmqcnoesy

Ну,

Прежде всего, идентификатор опора должна быть использована для идентификации одного экземпляра объекта ,

Таким образом, вместо того, чтобы использовать класс для элементов 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>

EDIT: Кроме того, поместите этот скрипт на $ (документ) .ready только один раз для всей страницы, ок?

источник

2012-06-11 22:03:03

Несколько DIV наведите указатель мыши на проблему

ответ

Смежные вопросы