Мероприятие при наведении курсора на несколько элементов

Question

Я застрял, создавая код, который прост и сейчас я хочу использовать только JavaScript.

http://jsfiddle.net/TheOne_TheMany/30zdkrys

У меня проблема в том, что состояние наведения мыши, когда оно проходит над <li>, работает, но мигает при переходе через область удаления <div>. Я знаю, почему это происходит (после долгих исследований). Поэтому я попробовал mouseleave, но мне нужно иметь несколько ID на <li>, чтобы заставить его работать.

Есть ли более чистый способ кодирования без создания такого количества ID или нескольких прослушивателей событий. Особенно, если я собираюсь добавить еще <li> или удалить их.

Заранее спасибо за помощь.

Answer 1

Проблема в том, что дочерний элемент <div> находится перед <li> при наведении на него, поэтому целью является не <li>, а <div>. Я настоятельно рекомендую вам использовать hover в CSS вместо JavaScript для ее решения, но, поскольку вы хотите вот так, вот вам go:

Внутри функции mouseOver добавьте еще одну оператор if, чтобы проверить, находится ли мышь внутри кнопки удаления. Затем вы добавляете классы к <li> и кнопке.

const mouseOver = function(item){

    // Btn animation'
    if (item.target === btnSend) {
        item.target.classList.add('btnOver');
    }

    // Li animation
    if (item.target.matches('li')) {
        item.target.classList.add('onLi');
        item.target.lastChild.classList.add('containerDelete');
    }

    if (item.target.matches('.deleteMe')) {
       item.target.parentNode.parentNode.classList.add('onLi');
       item.target.classList.add('containerDelete');
    }

    item.stopPropagation;

}

Затем в функции mouseLeave добавьте еще один оператор if, чтобы проверить, не отходит ли мышь от кнопки <li>, и удалите.
Внутри нее вы также можете проверить, цель - <li> или кнопка <div>, потому что вы должны удалить классы по-другому.

const mouseLeave = function(item){

    // Btn animation   
    if(item.target === btnSend){
        item.target.classList.remove('btnOver');
    } else if (!item.toElement.matches('li') && !item.toElement.matches('.deleteMe')) {
      if (item.target.tagName === 'LI') {
        item.target.classList.remove('onLi');
        item.target.lastChild.classList.remove('containerDelete');
      }
      if (item.target.tagName === 'DIV') {
        item.target.parentNode.parentNode.classList.remove('onLi');
        item.target.parentNode.classList.remove('containerDelete');
        console.log('ok')
      }
    }

}