1

Есть теги <h5>, которые скрыты при помощи display: none.
Нужно чтобы при наведении появлялся тот элемент, на который навели, а не все элементы подряд.
Как можно такое сделать?

$('ul > li > a').mouseout(function() {
    $('ul > li > a > h5').css({
        'display': 'none'
    });
});
$('ul > li > a').mouseover(function() {
    $('ul > li > a > h5').css({
        'display': 'block'
    });
});
15
  • 2
    console.log('this'); всегда выводит в консоль строку this
    – Grundy
    20 ноя 2015 в 12:56
  • 2
    а зачем тут вообще яваскрипт?
    – Grundy
    20 ноя 2015 в 12:56
  • 1
    скрыты при помощи display:block - это круто.
    – Qwertiy
    20 ноя 2015 в 12:57
  • 1
    @DmitriySimushev, так и события тоже ведь.
    – Qwertiy
    20 ноя 2015 в 12:58
  • 3
    @Qwertiy, опоздал :-D
    – Grundy
    20 ноя 2015 в 13:04

2 ответа 2

10

В данном случае вам вообще не нужен JavaScript. Можно обойтись средствами CSS:

ul > li > a > h5 {
    display: none;
}

ul > li > a:hover > h5 {
    display: block;
}
5

Скриптом это делается так:

$('ul > li > a').hover(function() {
  $(this).children('h5').css({
    'display': 'none'
  });
}, function() {
  $(this).children('h5').css({
    'display': 'block'
  });
});

Но по-нормальному это надо делать без скрипта:

ul > li > a > h5 {
  display: none;
}

ul > li > a:hover > h5 {
  display: block;
}
18
  • В первом js обработчике $('ul > li > a > h5') избыточно. Наверное правильнее сделать по аналогии со вторым 20 ноя 2015 в 13:08
  • 1
    я бы предположил что все таки лучше mouseenter вместо mouseover
    – Grundy
    20 ноя 2015 в 13:08
  • @Grundy, обновил
    – Qwertiy
    20 ноя 2015 в 13:11
  • Ну и если уж придираться, то лучше .hide/.show вместо редактирования CSS свойств 20 ноя 2015 в 13:13
  • The .hover() method binds handlers for both mouseenter and mouseleave events.
    – Grundy
    20 ноя 2015 в 13:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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