Див .: стан наведення курсора в Інструменти для розробників Chrome

Я хочу побачити :hoverстиль для якоря, над яким я ширяю в Chrome . У Firebug є спадне меню, що дозволяє мені вибирати різні стани для елемента.

Я не можу знайти щось подібне в Chrome. Я щось пропускаю?

Тепер ви можете побачити обидва правила псевдокласу та примусити їх до елементів.

Щоб побачити такі правила, як :hoverна панелі Стилі, клацніть невеликий :hovтекст у верхньому правому куті.

Щоб примусити елемент до :hoverстану, клацніть правою кнопкою миші та виберіть :hover.

Додаткові поради на панелі елементів у ярликах Інструментів для розробників Chrome .

EDIT: Ця відповідь була до виправлення помилки, див. Відповідь tnothcutt.

• Клацніть правою кнопкою миші елемент, але НЕ переміщуйте вказівник миші від елемента, утримуйте його в режимі наведення.
• Виберіть оглянути елемент за допомогою клавіатури, як у стрілці вгору, а потім клавішу Enter.
• Загляньте в інструменти для розробників у відповідність Правилам CSS, і ви повинні мати можливість бачити: наведення курсор.

PS: Я спробував це на одному з ваших тегів запитань.

Я хотів побачити стан наведення на своїх підказках Bootstrap. Примусовий стан: навести курсор у Chrome dev Tools не створив необхідний вихід, але запускаючи подія мишоподібного пристрою через консоль, було зроблено трюк у Chrome. Якщо jQuery існує на сторінці, ви можете запустити:

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');

Існує кілька способів побачити стилі HOVER STATE в Інструментах для розробників Chrome.

Спосіб 01

Спосіб 02

З Firefox за замовчуванням розробник

З Firebug

Якщо це допомагає, в останньому Chrome (47.0.2526.106) це здається легшим:

Огляньте елемент і натисніть на три білі точки в лівій жолобі:

Потім виберіть потрібний стан елемента з цього випадаючого меню:

Я не думаю, що існує спосіб це зробити. Я надіслав запит на функцію . Якщо є спосіб, розробники в Google попросту покажуть це, і я відредагую свою відповідь. Якщо ні, то доведеться чекати і дивитися. (ви можете зірочити проблему, щоб проголосувати за неї)

Коментар 1 учасника проекту Chrome : У 10.0.620.0 на панелі «Стилі» відображаються стилі: наведіть курсор для вибраного елемента, але не: активний.

(станом на цю посаду) Поточна версія стабільного каналу - 8.0.552.224.

Ви можете замінити установку стабільного каналу Google Chrome на Beta канал або Dev канал (Див. Канали випуску раннього доступу ).

Ви також можете встановити вторинну установку хрому, яка є ще більш актуальною, ніж канал Dev .

... Збірка Canary оновлюється навіть частіше, ніж канал Dev, і не випробовується перед випуском. Оскільки збірка Canary може бути часом непридатною, вона не може бути встановлена ​​як ваш веб-переглядач за замовчуванням і може бути встановлена ​​на додаток до будь-якого з перерахованих вище каналів Google Chrome. ...

Я знаю, що те, що я роблю, є досить вирішувальним, однак воно працює чудово, і саме так я роблю щоразу.

Потім дійте так:

• Спочатку переконайтесь, що Інструменти для розробників Chrome не розблоковані.
• Потім просто перемістіть будь-яку сторону вікна інструментів Dev на середину елемента, який ви хочете оглянути під час завивання.

• Нарешті, наведіть курсор на елемент, клацніть правою кнопкою миші та огляньте елемент, перемістіть мишу у вікно інструментів Dev, і ви зможете пограти зі своїм елементом: навести курсор.

Ура!

Я налагоджував hoverстан меню в Chrome і робив це, щоб побачити код стану наведення курсору:

На Elementsпанелі натисніть Toggle Element stateкнопку і виберіть :hover.

На Scriptsпанелі перейдіть до Event Listeners Breakpointsправого нижнього розділу та виберіть Mouse -> mouseup.

Тепер огляньте Меню та виберіть потрібне поле. Коли ви відпустите кнопку миші, вона зупиниться і покаже вибраний елемент наведення курсора на Elementsпанелі (дивіться Stylesрозділ).

Зміна статусу наведення в Chrome досить просто, просто виконайте наступні кроки нижче:

1) Клацніть правою кнопкою миші на вашій сторінці та виберіть «Оглянути»

2) Виберіть елемент, який ви хочете перевірити в DOM

3) Виберіть піктограму шпильки (Переключити стан елемента)

4) Потім позначте курсор

Тепер ви можете побачити стан наведення вибраної DOM у браузері!

Я міг побачити стиль, виконавши наведені нижче кроки, запропоновані Babiker - "Елемент клацання правою кнопкою миші, але НЕ переміщуйте вказівник миші від елемента, тримайте його в режимі наведення. Виберіть елемент огляду за допомогою клавіатури, як у стрілці вгору та потім введіть ключ. "

Для зміни стилю виконайте наведені вище кроки, а потім - Змініть вкладку браузера, натиснувши ctrl + TAB на клавіатурі. Потім натисніть на вкладку, яку ви хочете налагодити. Ваш курсор на екрані все ще буде там. Тепер обережно підведіть мишу до області інструментів для розробників.

У моєму випадку я хочу скористатись підказкою завантажувальної програми. Але вищевказані методи для мене не працюють. Я думаю, завантажувальна програма реалізувала це чимось на кшталт події миші в / в.

У будь-якому випадку, коли я наведіть на кнопку, він генерує братський html-елемент під кнопкою, тому я вибираю батьківський елемент кнопки на вкладці "Елементи" у вікні "Інструменти розробника", наведіть на неї курсор та "Ctrl + C", тоді я можу вставити вихідний код, який містить створений код. Останнє знайдіть створений код та додайте його до вихідного коду за допомогою "Редагувати як HTML" на вкладці "Елементи".

Сподіваюся, це може комусь допомогти.

Я думаю, це вже не проблема в Chrome, а про всяк випадок. Я написав цей сценарій jQuery, щоб перевірити DOM, коли я рухаюся за допомогою клавіші TAB.

Якщо змінити на "миші", це виглядатиме так:

$("body *").on('mouseover', function(event) {       
    console.log(event.target);      
    inspect(event.target);
    event.stopPropagation();
});

Ви можете легко змінити його, щоб видалити обробник подій кожного разу, коли клацніть або зробите щось на елементі, на якому ви хочете зупинитися.