Смотрите: состояние Hover в инструментах разработчика Chrome

Question

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

Answer 1

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

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

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

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

Answer 2

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

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

• Щелкните правой кнопкой мыши, но не отвлекайте указатель мыши от элемента, держите его в состоянии зависания.
• Выберите Escover Element через клавиатуру, как в стрелке Hit Up, а затем введите клавишу.
• Посмотрите на инструменты разработчика в соответствии с соответствующими правилами CSS, вы должны увидеть: Hover.

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

Answer 3

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

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

Answer 4

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

Метод 01

Метод 02

С Firefox Default Developer Toll

С Firebug

Answer 5

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

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

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

Answer 6

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

---

Комментарий 1 от Chrome Project Member: В 10.0.620.0 на панели Styles показывается: стили наклона для выбранного элемента, но не: Active.

---

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

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

Вы также можете установить Вторичная установка Chrom.

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

Answer 7

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

Затем продолжайте так:

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

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

Ваше здоровье!

Answer 8

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

в Elements Панель щелкнет Toggle Element state кнопка и выберите :hover.

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

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

Answer 9

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

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

Answer 10

Переход на прокачать Статус в Chrome довольно прост, просто выполните следующие шаги ниже:

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

2) Выберите элемент, который вам нравится, чтобы проверить в Дом

3) Выберите значок PIN (Состояние переключения элемента)

4) Затем отметьте прокачать

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

Answer 11

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

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

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

Answer 12

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

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

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

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