Я хочу увидеть :hover
стиль якоря в Chrome . В Firebug есть выпадающий список стилей, который позволяет мне выбирать различные состояния для элемента.
Я не могу найти ничего похожего в Chrome. Я что-то пропустил?
Я хочу увидеть :hover
стиль якоря в Chrome . В Firebug есть выпадающий список стилей, который позволяет мне выбирать различные состояния для элемента.
Я не могу найти ничего похожего в Chrome. Я что-то пропустил?
Ответы:
Теперь вы можете видеть оба правила псевдокласса и накладывать их на элементы.
Чтобы увидеть правила, как :hover
на панели «Стили», щелкните маленький :hov
текст в правом верхнем углу.
Чтобы перевести элемент в :hover
состояние, щелкните его правой кнопкой мыши и выберите :hover
.
Дополнительные советы по панели элементов в ярлыках инструментов разработчика Chrome .
<a>
элементах).
PS: я попробовал это на одном из ваших вопросов тегов.
Я хотел видеть состояние наведения на моих подсказках Bootstrap. Форсирование состояния: hover в Chrome dev Tools не создало требуемого вывода, но запуск события mouseenter через консоль сделал свое дело в Chrome. Если на странице существует jQuery, вы можете запустить:
$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');
Есть несколько способов увидеть стили HOVER STATE в Chrome Developer Tools.
Метод 01
Способ 02
С платным Firefox разработчиком по умолчанию
С Firebug
Я не думаю, что есть способ сделать это. Я отправил запрос на добавление функции . Если найдется способ, разработчики в Google неуклюже укажут на это, и я отредактирую свой ответ. Если нет, нам придется подождать и посмотреть. (Вы можете пометить вопрос, чтобы проголосовать за него)
Комментарий 1 от участника проекта Chrome : В 10.0.620.0 на панели «Стили» отображаются стили: hover для выбранного элемента, но не: active.
(по состоянию на этот пост) Текущая версия стабильного канала - 8.0.552.224.
Вы можете заменить установку стабильного канала Google Chrome на бета-канал или канал Dev (см. Каналы раннего выпуска ).
Вы также можете установить вторичную установку Chrome, которая еще более актуальна, чем канал Dev .
... Сборка Canary обновляется даже чаще, чем канал Dev, и не тестируется перед выпуском. Поскольку сборка Canary иногда может быть непригодна для использования, ее нельзя установить в качестве браузера по умолчанию, и она может быть установлена в дополнение к любому из вышеперечисленных каналов Google Chrome. ...
Я знаю, что то, что я делаю, - это обходной путь, однако оно работает идеально, и именно так я делаю это каждый раз.
Затем действуйте так:
Ура!
Я отлаживал состояние меню в hover
Chrome и сделал это, чтобы увидеть код состояния при наведении:
На Elements
панели нажмите на Toggle Element state
кнопку и выберите :hover
.
На Scripts
панели перейдите Event Listeners Breakpoints
в правый нижний раздел и выберите Mouse -> mouseup
.
Теперь осмотрите меню и выберите нужное поле. Когда вы отпустите кнопку мыши, она должна остановиться и показать вам состояние наведения выбранного элемента на Elements
панели (см. Styles
Раздел).
Переключиться в режим наведения в Chrome довольно просто, просто выполните следующие действия:
1) Щелкните правой кнопкой мыши на своей странице и выберите осмотреть
2) Выберите элемент, который вы хотите проверить в DOM
3) Выберите значок булавки (Toggle Element State)
4) Затем отметьте парение
Теперь вы можете видеть состояние зависания выбранной DOM в браузере!
Я мог увидеть стиль, выполнив следующие шаги, предложенные Babiker: «Щелкните правой кнопкой мыши по элементу, но НЕ перемещайте указатель мыши от элемента, держите его в состоянии наведения. Выберите осмотреть элемент с помощью клавиатуры, как в случае нажатия стрелки вверх и затем введите ключ. "
Для изменения стиля выполните описанные выше шаги, а затем - измените вкладку браузера, нажав Ctrl + TAB на клавиатуре. Затем нажмите на вкладку, которую вы хотите отладить. Ваш экран при наведении все еще будет там. Теперь осторожно наведите курсор мыши на область инструментов разработчика.
В моем случае я хочу дублировать всплывающую подсказку. Но описанные выше методы не работают для меня. Я предполагаю, что начальная загрузка реализовала это чем-то вроде события мыши в / из.
В любом случае, когда я наведите курсор мыши на кнопку, она сгенерирует братский HTML-элемент под кнопкой, поэтому я выбираю родительский элемент кнопки на вкладке «Элементы» окна «Инструменты разработчика», наведите на нее курсор и «Ctrl + C», Затем я могу вставить исходный код, который содержит сгенерированный код. Последним найдите сгенерированный код и добавьте его в исходный код с помощью «Редактировать как HTML» на вкладке «Элементы».
Надеюсь, это может кому-нибудь помочь.
Я думаю, что это больше не проблема в Chrome, но на всякий случай. Я написал этот скрипт jQuery для проверки DOM, когда я перемещаюсь с помощью клавиши TAB.
Если изменить для использования mouseover, будет выглядеть так:
$("body *").on('mouseover', function(event) {
console.log(event.target);
inspect(event.target);
event.stopPropagation();
});
Вы можете легко изменить его, чтобы удалить обработчик событий, когда вы щелкаете или делаете что-то с элементом, на котором хотите остановиться.