См .: состояние наведения в Chrome Developer Tools


855

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

Я не могу найти ничего похожего в Chrome. Я что-то пропустил?


Хороший вопрос, потому что я искал, как отредактировать стиль наведения в Firebug - см. Здесь stackoverflow.com/questions/5389245/…
Крис Хэлкроу

1
Я знаю, что это не полное / идеальное решение проблемы, но не смог найти решения в ответах, которые бы работали для событий наведения мыши. Использование Safari позволяет вам зависать при использовании инструментов браузера. Следовательно, только для этой проблемы, рассмотрите возможность использования другого браузера.
12

Ответы:


1256

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

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

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

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

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

Дополнительные советы по панели элементов в ярлыках инструментов разработчика Chrome .


3
Не уверен, когда это изменилось, но теперь вы можете щелкнуть правой кнопкой мыши -> принудительное состояние элемента (из панели элементов) на других элементах (не только на <a>элементах).
Трэвис Норткатт

3
Это работает для CSS: изменения при наведении, но не при внесении изменений с помощью JS.
Matthew_360

Вот короткое видео, которое я собрал вместе, демонстрирующее состояние: hover в Chrome 59, если оно кому-нибудь помогает youtu.be/Bklz3lGTFi8
RoccoB

54

РЕДАКТИРОВАТЬ: Этот ответ был до исправления ошибки, см. Ответ tnothcutt.

Это было немного сложно, но здесь идет:

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

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


31

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

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

Принудительное наведение курсора или мыши для всплывающих подсказок


Это лучший ответ
Аргун

20

Есть несколько способов увидеть стили HOVER STATE в Chrome Developer Tools.

Метод 01

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

Способ 02

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

С платным Firefox разработчиком по умолчанию

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

С Firebug

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


9

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

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

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


4

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


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


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

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

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

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


Отличное расследование. Я качаю последнюю версию dev (10.0.612.3), так что я просто подожду немного и, надеюсь, я увижу: hover good!
Бен

4

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

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

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

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

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

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

Ура!


1
Собираюсь добавить комментарий, чтобы я мог найти это снова, потому что я знаю, что он мне понадобится! Особенно важно для непредсказуемых сторонних плагинов пользовательского интерфейса.
cfranklin

3

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

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

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

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


2

Переключиться в режим наведения в Chrome довольно просто, просто выполните следующие действия:

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

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

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

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

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

4) Затем отметьте парение

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


1

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

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


1
Вам не нужно держать мышь в состоянии наведения
Захари Книбель

1

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

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

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


0

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

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

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.