Как я могу лучше управлять этим jQuery сценарием пользовательского интерфейса, который добавляет оверлей к div в событии mouseover / mouseout?

Question

Я создаю домашнюю страницу для веб-сайта, которая содержит множество рекламных ссылок, содержащихся в <div> элементах.

Чтобы сделать его более интересным, я разработал оверлей <img>, который я Хотелось бы появиться над <div>, когда пользователь наводит курсор на соответствующую рекламу, а затем исчезать при удалении курсора. Я включаю и выключаю его с помощью эффекта jQuery UI .toggle(), например:

$("#hp-promo-1").on("mouseover", function() {
  $("#promo-1-overlay").toggle("slide", {direction: "right"})
})

$("#hp-promo-1").on("mouseout", function() {
  $("#promo-1-overlay").toggle("slide", {direction: "right"})
})

Хотя этот работает , поскольку он оживляет наложение и у меня проблемы с осуществлением какого-либо контроля над этим. Иногда наложение просто включается и выключается многократно, даже после события mouseout.

Что я могу ввести в этот код, чтобы гарантировать, что наложение включается один раз, а затем остается там, где оно включено mouseover , а затем соскальзывает один раз и остается скрытым на mouseout?

Answer 1

Я решил это, заменив mouseover и mouseout на mouseenter и mouseleave.

Проблема была вызвана тем, что курсор передавал элементы, содержащиеся в <div> (например, текст), который вызывал событие mouseout, но mouseleave игнорирует элементы, содержащиеся в <div>, и срабатывает только тогда, когда курсор пользователя покинул сам div.