it-roy-ru.com

См .: состояние при наведении в Chrome Инструменты разработчика

Я хочу увидеть стиль :hover для якоря, над которым я нахожусь в Chrome. В Firebug есть выпадающий список стилей, который позволяет мне выбирать различные состояния для элемента. Я не могу найти ничего похожего в Chrome. Я что-то пропустил?

812
Ben

Теперь вы можете видеть оба правила класса псевдо и навязывать их элементам.

Чтобы увидеть такие правила, как :hover на панели "Стили", щелкните маленький текст :hov в правом верхнем углу.

Toggle element state

Чтобы перевести элемент в состояние :hover, щелкните его правой кнопкой мыши.

Force element state

Дополнительные советы по панель элементов in Ярлыки Chrome Developer Tools .

1180
Travis Northcutt

Правка: Этот ответ был до исправления ошибки, см. Ответ tnothcutt.

  • Щелкните правой кнопкой мыши элемент, но НЕ перемещайте указатель мыши от элемента, держите его в состоянии наведения.
  • Выберите осмотреть элемент через клавиатуру, как при нажатии стрелки вверх, а затем клавишу Enter.
  • Посмотрите в инструментах разработчика под Matched CSS Rules, вы должны увидеть: hover.

PS: я попробовал это на одном из ваших тегов вопроса.

53
Babiker

Я хотел видеть состояние наведения в моих подсказках Bootstrap. Форсирование состояния: hover в Chrome dev Инструменты не создавали требуемый вывод, но запуск события mouseenter через консоль добился цели в Chrome. Если на странице существует jQuery, вы можете запустить:

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

Forcing hover or mouseenter for Bootstrap Tooltips

26
k0pernikus

Существует несколько способов просмотра стилей HOVER STATE в Chrome Инструментах разработчика.

Метод 01

enter image description here

Метод 02

enter image description here

С платой по умолчанию для разработчиков Firefox

enter image description here

с Firebug

enter image description here

13
Santosh Khalse

В случае, если это поможет, это будет проще в последнем Chrome (47.0.2526.106):

Осмотрите элемент и затем нажмите на три белые точки в левом желобе:
click on the three white dots

Затем выберите желаемое состояние элемента из этого выпадающего списка:
this dropdown

7
Ianp

Я не думаю, что есть способ сделать это. Я отправил запрос функции. Если найдется способ, разработчики в Google неуклюже укажут на это, и я отредактирую свой ответ. Если нет, нам придется подождать и посмотреть. (Вы можете пометить вопрос, чтобы проголосовать за него)


Комментарий 1 от Chrome участника проекта : В 10.0.620.0 на панели "Стили" отображаются стили: hover для выбранного элемента, но не: active.


(по состоянию на этот пост) Текущая версия Стабильный канал версия 8.0.552.224.

Вы можете заменить Стабильный канал установку Google Chrome на Бета-канал или Dev-канал (См. Каналы раннего выпуска ).

Вы также можете установить вторичная установка chrome, которая даже более актуальна, чем канал Dev .

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

4
Bryan Field

Я знаю, что то, что я делаю, - это обходной путь, однако оно работает идеально, и именно так я делаю это каждый раз.

Undock Chrome Developer Tools

Затем действуйте так:

  • Сначала убедитесь, что Chrome Инструменты разработчика отстыкованы.
  • Затем просто переместите любую сторону окна Dev Tools в середину элемента, который вы хотите проверить, находясь под мышкой.

Hover on element

  • Наконец, наведите курсор на элемент, щелкните правой кнопкой мыши и осмотрите элемент, переместите указатель мыши в окно Dev Tools, и вы сможете поиграть со своим элементом: hover css.

Ура!

3
rmartrenado

Я отлаживал состояние hover меню с помощью Chrome и ​​сделал это, чтобы увидеть код состояния при наведении:

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

На панели Scripts перейдите к Event Listeners Breakpoints в правом нижнем разделе и выберите Mouse -> mouseup.

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

2
Leniel Maccaferri

В моем случае я хочу дублировать подсказку bootstrap. Но описанные выше методы не работают для меня. Я предполагаю, что bootstrap реализовал это как-то как событие мыши в/из.

В любом случае, когда я наведите курсор мыши на кнопку, она сгенерирует братский HTML-элемент под кнопкой, поэтому я выбираю родительский элемент кнопки на вкладке "Элементы" окна "Инструменты разработчика", наведите на нее курсор и "Ctrl + C", Затем я могу вставить исходный код, который содержит сгенерированный код. Последним найдите сгенерированный код и добавьте его в исходный код с помощью "Редактировать как HTML" на вкладке "Элементы".

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

1
Sean Song

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

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

1
Ram

Изменить статус наведения в Chrome довольно просто, просто выполните следующие действия:

1) Щелкните правой кнопкой мыши на своей странице и выберите "осмотреть"

enter image description here

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

enter image description here

3) Выберите значок булавки enter image description here (Переключить состояние элемента)

4) Затем отметьте курсор

Теперь вы можете видеть состояние наведения выбранного DOM в браузере!

1
Alireza

Я думаю, что это больше не проблема в Chrome, а на всякий случай. Я написал этот jQuery script для проверки DOM, когда я перемещаюсь с помощью клавиши TAB.

Если изменить для использования mouseover, будет выглядеть так:

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

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

0
davidmontoyago