0

Как скрыть блок div, если пользователь заходит на пределы его курсором? Изначально мой блок div отображается по наведению на элемент span, после при вывода курсора из области с id="NotificationList" - нужно скрыть родительский блок .extendWrapper ()

<span>show</span>
<div class="extendWrapper">
<div id="NotificationList"></div>
</div>
2
  • 1
    мне кажется ответ хороший, автору вопроса можно его принять
    – vox
    3 янв 2014 в 7:37
  • можно использовать $(el).toggle() 30 сен 2015 в 13:43

1 ответ 1

3

Привет! При помощи jQuery элементы можно скрывать, к примеру, функцией .hide().

Но в таком варианте происходит запись стилей непосредственно в тег элемента. Я пользуюсь вспомогательным CSS-классом .hidden, для того, чтобы избежать этого.

Пример:

$('span').mouseover(function () {
  $('.extendWrapper').removeClass('hidden');
});

$('#NotificationList').mouseout(function () {
  $('.extendWrapper').addClass('hidden');
});

Пример на jsfiddle.net

Используй карту функций, для более уверенной работы с jQuery. ;-)

6
  • 1
    > Но в таком варианте происходит запись стилей непосредственно в тег элемента. Почему это плохо? 2 янв 2014 в 4:50
  • Засирает разметку, браузер вряд ли кэширует, трудно осуществить одни и те же модификации из разных мест (разных скриптов, или, что более вероятно, при генерации на стороне сервера), сложно отдебажить место появления той или иной модификации на странице. Хотя анимации, понятное дело, без этого никак не могут.
    – etki
    2 янв 2014 в 5:02
  • 1
    > браузер вряд ли кэширует Не кэширует, кэшируется HTTP, а не HTML. Не вижу проблемы. > трудно осуществить одни и те же модификации из разных мест В чём конкретно сложность? > сложно отдебажить место появления той или иной модификации на странице Это да, но ведь тут мы код видим, а не HTML. Всё-таки думаю использовать jquery hide, show правильнее, хотя бы потому что у них веса больше и пишутся короче. 2 янв 2014 в 8:58
  • вариант вполне подходит, но проблема в том, что в самом блоке .extendWrapper есть другие блоки, и соответственно при попадании курсора в их область - блок скрывается. Блок extendWrapper должен скрываться только при выходе за его приделы...Какие есть варианты?
    – IOleg
    2 янв 2014 в 11:19
  • 2
    @IOleg если хотите запускать событие при выходе курсора из области элемента .extendWrapper, установите обработчик события ему. Пример: jsfiddle.net/tVUh9/3
    – user16639
    2 янв 2014 в 15:11

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.