Avatar for Username

Hilfe durchsuchen

Vorsicht vor Support-Betrug: Wir fordern Sie niemals auf, eine Telefonnummer anzurufen, eine SMS an eine Telefonnummer zu senden oder persönliche Daten preiszugeben. Bitte melden Sie verdächtige Aktivitäten über die Funktion „Missbrauch melden“.

Learn More

Dieses Thema wurde archiviert. Bitte stellen Sie eine neue Frage, wenn Sie Hilfe benötigen.

Devtools Pseudoclass hover only working on first load

chabuku
chabuku
more options

I'm working on developing something using Codepen and when I refresh either the pen itself or the browser completely the pseudoclass selector for `:hover` does not work. It does on first page load when I open (or open and then close) the browser.

Example: I am trying to style a `< li >` and it's child.

I open the pseudoclass selector and check `:hover`.

I have a setting to change the display from `display:none` to `diplay:inline-flex` on a child when the `li` is hovered. It does not do this if I refresh internally (in codepen) or if I refresh the browser itself.

It works again once I close Firefox and reopen altogether.

I am including two screenshots of the working and not working states. The first (firefox-devtools-bug1.png) shows working, and the second (firefox-devtools-bug2.png) shows the not-working state.

edited for cleanliness

I'm working on developing something using Codepen and when I refresh either the pen itself or the browser completely the pseudoclass selector for `:hover` does not work. It does on first page load when I open (or open and then close) the browser. Example: I am trying to style a `< li >` and it's child. I open the pseudoclass selector and check `:hover`. I have a setting to change the display from `display:none` to `diplay:inline-flex` on a child when the `li` is hovered. It does not do this if I refresh internally (in codepen) or if I refresh the browser itself. It works again once I close Firefox and reopen altogether. I am including two screenshots of the working and not working states. The first (firefox-devtools-bug1.png) shows working, and the second (firefox-devtools-bug2.png) shows the not-working state. ''edited for cleanliness''
Angefügte Screenshots

Geändert am von Andrew

Alle Antworten (4)

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 10 Contributor
more options

Could you link to a CodePen demonstrating this problem? It can be something simplified and not your actual project.

Note: There is a filter that diverts posts with URLs to a link moderation queue, so if your reply takes some time to appear, that's normal.

chabuku
chabuku Fragesteller
more options

Here's one I stopped developing while experiencing the bug (and forked so I can continue working on it): https://codepen.io/adbakke/pen/abNPypV

Here's the steps to reproduce: inspect the first menu item "Products", then select the
  • and open pseudoclass menu. Select :hover pseudoclass on the li element. It will open up the submenu. Then once you see it, then click "Run" on the pen itself. Repeat inspecting menu item and selecting pseudoclass, et cetera and the second time the submenu will not appear and the :hover will not show.
    • chabuku
    chabuku Fragesteller
    more options

    Here's a codepen I have since forked: https://codepen.io/adbakke/pen/abNPypV

    I left this one so I can show the possible bug but continued on a forked version.

    Here's steps to reproduce:

    • inspect the first menu item "Products"
    • select the
    • and open pseudoclass menu
    • Select :hover pseudoclass on the li element. It will open up the submenu.
    • Then once you see it, then click "Run" on the pen itself
    • Repeat inspecting menu item and selecting pseudoclass, et cetera and the second time the submenu will not appear and the :hover will not show
    jscher2000 - Support Volunteer
    jscher2000 - Support Volunteer
    • Top 10 Contributor
    more options

    Hmm, I see what you're saying. Leaving :hover enabled in the Inspector when you click Run breaks it. If I close the Inspector, click Run again, then start from step 1, it seems to work again.

    Could you compare this one: https://jsfiddle.net/fp2z7g5c/