Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Devtools Pseudoclass hover only working on first load

  • 4 replies
  • 1 has this problem
  • 14 views
  • Last reply by jscher2000

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

Attached screenshots

Modified by Andrew

All Replies (4)

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.

Helpful?

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.
  • Helpful?

    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

    Helpful?

    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/

    Helpful?

    Ask a question

    You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.