См. Раздел "Состояние зависания" в инструментах разработчика Chrome.

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

697
23 дек. '10 в 4:16
источник поделиться
11 ответов

Теперь вы можете видеть как правила psuedo-класса, так и принудительно их применять к элементам.

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

Переключить состояние элемента

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

Состояние элемента элемента

Дополнительные советы на панели в "Горячие клавиши для разработчиков Chrome" .

1009
21 июля '11 в 18:25
источник

Связанные вопросы


Похожие вопросы

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

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

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

48
23 дек. '10 в 4:47
источник

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

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

Forcing hover or mouseenter for Bootstrap Tooltips

19
23 дек. '14 в 18:25
источник

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

Метод 01

введите описание изображения здесь

Метод 02

введите описание изображения здесь

С Firefox Developer Developer Toll

введите описание изображения здесь

С Firebug

введите описание изображения здесь

8
06 янв. '17 в 11:05
источник

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

Осмотрите элемент, а затем нажмите на три белые точки в левом желобе:
нажмите на три белых точки

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

7
04 янв. '16 в 22:22
источник

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


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


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

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

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

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

4
23 дек. '10 в 4:34
источник

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

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

В панели Scripts перейдите в Event Listeners Breakpoints в правой нижней части и выберите Mouse -> mouseup.

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

2
22 июля '12 в 18:05
источник

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

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

1
02 мая '14 в 13:55
источник

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

Отменить инструменты для разработчиков Chrome

Затем выполните следующие действия:

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

Наведение на элемент

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

Ура!

1
22 авг. '15 в 2:11
источник

Переход на hover статус в Chrome довольно прост, просто выполните следующие действия:

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

введите описание изображения здесь

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

введите описание изображения здесь

3) Выберите значок пиктограммы введите описание изображения здесь (Toggle Element State)

4) Затем отметьте hover

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

0
26 июня '17 в 12:01
источник

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

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

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

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

0
18 окт. '13 в 4:26
источник

Посмотрите другие вопросы по меткам или Задайте вопрос