Devtools Pseudoclass hover only working on first load
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
Modified by Andrew
All Replies (4)
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.
Here's one I stopped developing while experiencing the bug (and forked so I can continue working on it): https://codepen.io/adbakke/pen/abNPypVHere's the steps to reproduce: inspect the first menu item "Products", then select the
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
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/