Проверять элемент, который появляется только тогда, когда другой элемент наводится / вводится мышью

Часто я хочу проверить элемент (например, всплывающую подсказку), который появляется только тогда, когда другой элемент наводится / вводится мышью. Появившийся элемент становится видимым через событие mouseenter в jQuery.

Я не могу проверить всплывающую подсказку, так как всплывающая подсказка исчезает, когда моя мышь покидает содержащий элемент.

Есть ли способ приостановить события JS, чтобы я мог навести курсор на элемент, затем приостановить JS браузера и успешно проверить его?

Например, попробуйте просмотреть всплывающие подсказки начальной загрузки Twitter: http://getbootstrap.com/javascript/#tooltips .

В Chrome 38.0.2094.0 это довольно просто.

Вот как это будет выглядеть:

Шаг за шагом:

1. Откройте DevTools на панели Sources
2. Отображение всплывающей подсказки при наведении курсора на кнопку
3. Нажмите F8, чтобы заморозить страницу
4. Переключитесь на панель Elements и используйте значок увеличительного стекла в левом верхнем углу, чтобы выбрать всплывающую подсказку.

Если всплывающая подсказка появляется из-за CSS, вот что вы можете сделать в этом случае:

Шаг за шагом:

1. Откройте DevTools
2. Выберите запускающий элемент в инструментах разработки (ссылка)
3. Щелкните правой кнопкой мыши и выберите "Force element state", затем выберите ": hover"
4. Просмотрите всплывающую подсказку CSS

Оба Сафари и Web Inspector предложения флажков Chrome, где вы можете переключать :active, :focus, :hoverи :visitedсостояние элемента. Использовать их может быть еще проще.

Сафари:

Хром:

Есть еще один хитрый способ сделать это:

1. Перейдите к элементу, который вызывает всплывающую подсказку.
2. Щелкните правой кнопкой мыши, чтобы открыть контекстное меню.
3. Переместите указатель мыши в окно инструмента разработки и щелкните левой кнопкой мыши в любом месте панели инструментов разработчика.

Подсказка останется видимой, после чего вы сможете просмотреть ее на вкладке «Элемент».

Проверено в Chrome. Кажется, не работает в Firefox.

Хотя ответ @ SomeGuy отличный (t-up для анимированных гифок), в качестве альтернативы вы всегда можете сделать это программно. Просто откройте консоль и введите название события.

document.getElementById('id').dispatchEvent(new Event('event-type'));

(с чистым синтаксисом javascript может отличаться в зависимости от браузера)

С jQuery еще проще:

$('#id').trigger('event-type');

В вашем примере ( http://getbootstrap.com/javascript/#tooltips ) откройте консоль и введите, например:

$("button:contains('Tooltip on right')").mouseenter();

И всплывающая подсказка появляется в DOM и может быть проверена / изменена вручную:

<div style="top: 14406.9px; left: 1048.25px; display: block;"
id="tooltip952596" class="tooltip fade right in" role="tooltip">
<div style="" class="tooltip-arrow"></div>
<div class="tooltip-inner">Tooltip on right</div></div>

Как и в комментариях, если вы наведете указатель мыши на рамку страницы, вы можете инициировать другие события, такие как mouseout. Чтобы предотвратить это, вы можете нажать F8(как в соответствующем ответе) или ввести debugger;(что является его эквивалентом в сценарии)