Открытие блока при наведении на кнопку
Есть меню. И есть отдельный блок в HTML разметке стоит после самого меню.
Задача такая при наведении на пункт Показать каталог - открывается блок с каталогом. Как только мышку убираем с пункта Показать каталог - сам каталог скрывается. - этот момент сделал, тут вопросов нет. При наведении навешиваем класс и дальше CSS. Проблема с другим, когда каталог появляется - при перемещении мышки в область этого каталога - он скрывается. Хотя по скрипту вроде как не должен скрываться. Нужно чтобы при открытии каталога - можно было мышкой по нему перемещаться и переходить по ссылкам. <ul class="menu"> <li class="show_catalog">Показать каталог</li> <li>Пункт2</li> <li>Пункт3</li> <li>Пункт4</li> <li>Пункт5</li> </ul> <div id="subcatalog"> тут сам каталог.... </div>
<script type="text/javascript">
$('.show_catalog').on('mouseover', function() {
$("#subcatalog").addClass("hovered");
});
$(document).on('mouseover', function(e) {
if (!$('.show_catalog').is(e.target) && !$('#subcatalog').is(e.target)) { // если наводим не на .show_catalog и не на .menudop
$("#subcatalog").removeClass("hovered"); // скрываем блок
}
});
</script>
|
Когда вы водите мышью по блоку каталога, то попадаете на другие элементы, и они уже являются e.target. Т.е надо делать проверку на то, что блок каталога не является их родительским.
Вообще не понятно, зачем изобретать всякие самопальные интерфейсы. Сейчас уже большинство трафика в интернете идет с мобильных устройств с сенсорными экранами. Как человеку с сенсорным экраном работать с вашим меню? Да и есть полезное требование к интерфейсу, что бы им можно было пользоваться с клавиатуры. И как? |
Цитата:
|
greenzlat,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hovered{
border: 2px solid red;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
let timer;
$('.show_catalog, #subcatalog').on('mouseenter mouseleave', ({type}) => {
if (type == 'mouseenter') {
clearTimeout(timer);
$("#subcatalog").addClass("hovered");
} else timer = setTimeout(() => $("#subcatalog").removeClass("hovered"), 300)
});
});
</script>
</head>
<body>
<ul class="menu">
<li class="show_catalog">Показать каталог</li>
<li>Пункт2</li>
<li>Пункт3</li>
<li>Пункт4</li>
<li>Пункт5</li>
</ul>
<div id="subcatalog">
тут сам каталог....
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 07:12. |