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

119

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

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

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

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

Дон П
источник
9
К вашему сведению, если элемент появляется из-за CSS вместо JS, вы можете принудительно установить :hoverего, щелкнув правой кнопкой мыши элемент в представлении Elements (DOM) в инструментах разработчика, выбрав «Force Element State», а затем «: hover».
MMM

Ответы:

226

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

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

Шаг за шагом:

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

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

Шаг за шагом:

  1. Откройте DevTools
  2. Выберите запускающий элемент в инструментах разработки (ссылка)
  3. Щелкните правой кнопкой мыши и выберите "Force element state", затем выберите ": hover"
  4. Просмотрите всплывающую подсказку CSS
Какой-то парень
источник
1
@YuriyGalanter Это доступно через значок подзорной трубы в левом верхнем углу. Просто щелкните значок, затем щелкните всплывающую подсказку :)
Шиме Видас
3
Да, я добавил GIF, чтобы было легче увидеть, что я делаю.
Some Guy
2
@DonnyP Я использовал byzanz-record. Это пакет, с которым можно получить sudo apt-get install byzanz.
Some Guy
5
Также есть LICEcap , он записывает часть экрана прямо в супероптимизированный GIF. Windows, OS X и Linux.
fregante
2
@ bfred.it LICEcap это не доступны для Linux. См. Этот выпуск Github по теме. Кажется, у людей есть успех, используя WINE .
Исаак Грегсон
15

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

Сафари:

Флажки в Safari

Хром:

Флажки в Chrome

zıəs uɐɟəʇs
источник
5
Всплывающая подсказка не запускается :hoverстилями.
Шиме Видас
2
Firebug в Firefox имеет то же самое (минус :visited, который ограничен для предотвращения отслеживания) - на вкладке HTML он находится в раскрывающемся списке "Стиль" справа
Izkata
1
@Izkata Для встроенных инструментов разработчика Firefox щелкните правой кнопкой мыши элемент в хлебных крошках или дереве HTML / DOM и выберите из :hover, :activeили :focus.
Kiran Price
4

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

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

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

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

Николас Форни
источник
1
Так я делал это раньше, но ответ @ SomeGuy - лучший и самый простой способ.
John Washam
@JohnDubya Нет, на самом деле нет. Это может быть официальный способ, но не проще. Слишком много шагов.
MiniRagnarok
Я обычно так и делаю, но не всегда получается.
Synetech
3

Хотя ответ @ 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;(что является его эквивалентом в сценарии)

blgt
источник
1
Во время проверки элемента вы все равно можете запускать другие события (например, mouseout), поэтому это не решает проблему в первую очередь. Выбирая его, нужно быть очень осторожным. Но это альтернативный подход.
MMM