Просмотр состояния :hover в средствах разработчика Chrome

Это было немного сложно, но вот решение:

• Щелкните правой кнопкой мыши по элементу, но не убирайте указатель мыши от элемента.

– держите мышь в состоянии наведения.

• Выберите Инспектировать с помощью клавиатуры: нажмите стрелку вверх, затем клавишу Enter.
• Если нужно, используйте стрелки вверх/вниз, чтобы найти нужный HTML-элемент в инструментах разработчика.
• Посмотрите в инструментах разработчика под разделом "Соответствующие правила/стили".

Верхний селектор CSS должен быть типа :hover.

Чтобы отладить состояние hover меню в Chrome, выполните следующие шаги:

1. В панели Elements нажмите на кнопку Toggle Element state и выберите :hover.

2. Перейдите в панель Sources и в нижнем правом углу зайдите в раздел Event Listener Breakpoints, выберите Mouse -> mouseup.

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

Я смог увидеть стиль, следуя шагам, предложенным Бабикером: "Щелкните правой кнопкой мыши на элементе, но НЕ убирайте курсор с элемента, держите его в состоянии наведения. Затем выберите 'Просмотреть элемент' с помощью клавиатуры, нажав стрелку вверх и затем клавишу 'Enter'".

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

В моем случае я хочу отладить tooltip от Bootstrap. Однако описанные выше методы не сработали для меня. Думаю, Bootstrap реализует это с помощью событий mouse in/out.

Тем не менее, когда я наводил курсор на кнопку, под ней генерировался соседний элемент HTML. Поэтому я выбрал родительский элемент кнопки во вкладке "Elements" в окне "Инструменты разработчика", навел курсор на кнопку и использовал "Ctrl + C", чтобы скопировать исходный код, который содержит сгенерированный код. Затем я нашел сгенерированный код и добавил его в исходный код, выбрав "Edit as HTML" во вкладке "Elements".

Надеюсь, это кому-то поможет.

Вполне возможно, что код скрыт в базе данных, и файла с ним не существует. У моего клиента есть тема "Travelify" от Colorlib, и некоторые опции в админ-панели WordPress записываются напрямую в базу данных, в результате чего CSS-код генерируется динамически. Я смог увидеть CSS в исходном коде HTML, но нигде не нашел никаких реальных файлов с ним. Это свело меня с ума, и мне понадобилось время, чтобы разобраться в этом. Я нашел отличный инструмент для поиска в базе данных для WP, который называется "Search and Replace" от Inpsyde GmbH, и он оказался незаменимым. Конечно, будьте осторожны с его использованием!

Удачи!