Определение позиции курсора относительно элемента

@phpk · Регистрация: 15.05.2013

Подскажите пожалуйста, допустим есть выпадающий список ul li, открывающийся при наведении курсора на стрелку .arrow. Список должен открываться под стрелкой и текстом text. С открытием списка проблем нет.
Но открытый список закрывается, когда нужно переместить курсор со стрелки на список.
Как сделать, чтобы открытый список не закрывался при перемещении курсора со стрелки на список?

HTML5

<div>
    <p>text</p><span class="arrow">arrow</span>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>

CSS

1	ul{display: none}

Javascript

$(document).ready(function() {
 
    $('.arrow').on('mouseenter', function () {
        $(this).parent().find('ul').stop(true, true).slideDown(300);
    });
    $('.arrow').on('mouseenter', function () {
        $(this).parent().find('ul').stop(true, true).slideUp(300); 
    });
 
});

@Lazy_Den · 06.10.2015, 03:28

phpk, во-первых, у вас оба события "mouseenter". Хотя, это может быть опечатка. Во-вторых, нужно изменить html-структуру. Т.к. расстояние между arrow и ul в один пиксель, уже будет служить причиной для закрытия списка. Возьмите классическую структуру списков:

HTML5

<div>
    <ul>
        <li>text 1 <span class="arrow">arrow</span>
            <ul>
                <li>one 1</li>
                <li>two 1</li>
                <li>three 1</li>
            </ul>
        </li>
        <li>text 2 <span class="arrow">arrow</span>
            <ul>
                <li>one 2</li>
                <li>two 2</li>
                <li>three 2</li>
            </ul>
        </li>
    </ul>
</div>

Если вам принципиально важно, чтобы список раскрывался по наведению на arrow, подойдёт такой вариант:

Javascript

$(document).ready(function () {
 
    $('li').on({
        mouseover: function (e) {
            if (e.target.classList[0] === 'arrow') {
                $('ul', this).finish().slideDown(300);
            }
        },
        mouseleave: function () {
            $('ul', this).finish().slideUp(300);
        }
    });
 
});

Если же без разницы, то

Javascript

$(document).ready(function () {
 
    $('li').on({
        mouseenter: function (e) {
            $('ul', this).finish().slideDown(300);
        },
        mouseleave: function () {
            $('ul', this).finish().slideUp(300);
        }
    });
 
});

Обратите внимание, что в первом случае используется событие "mouseover", а во втором - "mouseenter"! Пример в песочнице

@phpk · 06.10.2015, 10:46 **[ТС]**

Сообщение от Lazy_Den

Обратите внимание, что в первом случае используется событие "mouseover", а во втором - "mouseenter"

собственно а почему там разные события? mouseover и mouseenter

@phpk 27 / 41 / 13 Регистрация: 15.05.2013 Сообщений: 1,313
	06.10.2015, 10:46 [ТС]	3
	Сообщение от Lazy_Den Обратите внимание, что в первом случае используется событие "mouseover", а во втором - "mouseenter" собственно а почему там разные события? mouseover и mouseenter 0

Опции темы