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

Inspector element highlight html element wont go away when the mouse no longer hovers

  • 2 replies
  • 3 have this problem
  • 91 views
  • Last reply by Ora_

more options

This question is about the developer tools (inspector). Sorry if this is not the right forum. If this is not the right place, please specify where I can ask this question. I have looked around but this seemed like the best place to write this.

This problem started a couple a month ago in Firefox Developer Edtion after an automatic update (to either v82 or 83, im not sure).

This is what used to be the case, prior to the update: In the developer tools, in the inspector tab. There's an overview of the HTML-tree, and when you hover over an html-element in the tree, the correspondent element in de browser window is highlighted, and when you move your mouse the item will no longer be highlighted, since you're no longer hovering over it in the HTML tree. This is how it has always been.

The situation as it has been for 2 to 4 weeks: After selecting a couple of items in de HTML tree, and maybe editing some CSS, so just after normal use, The selected element will stay highlighted, even though I'm no longer hovering over it in the Inspector window. I added a screenshot to show what I mean. This bug is annoying because when editing CSS, I want to be able to clearly see the changes I mean, but now theyre obstructed by the highlight. Toggling developer tools by pressing F12 twice fixes this obviously, but only for a couple of minutes, and sometimes the problem return immidiatly.

This problem first emerged in Firefox Developer Edition about a month ago after an update. It really messes with my workflow, and I couldnt find a solution. Tee problem emerged on multiple websites (not just the ones a was developing, as you can see in my screenshot it also happens on the mozzila website) and the problem was the same accros multiple computers (all modern windows 10 machinary, owned by me or my collegues). So I stopped using Developer Edition, and switched to using 'regular' Firefox for developing, as regular Firefox did not exibit this bug. But since last week, after regular Firefox also got an update, the bug appears in regular Firefox aswell.

So here I am, an avid Firefox Developer Edition user, desperate for a solution. Ofcourse I already tried everything from reïnstalling, refreshing firefox, everything.

Thanks

This question is about the developer tools (inspector). Sorry if this is not the right forum. If this is not the right place, please specify where I can ask this question. I have looked around but this seemed like the best place to write this. This problem started a couple a month ago in Firefox Developer Edtion after an automatic update (to either v82 or 83, im not sure). This is what used to be the case, prior to the update: In the developer tools, in the inspector tab. There's an overview of the HTML-tree, and when you hover over an html-element in the tree, the correspondent element in de browser window is highlighted, and when you move your mouse the item will no longer be highlighted, since you're no longer hovering over it in the HTML tree. This is how it has always been. The situation as it has been for 2 to 4 weeks: After selecting a couple of items in de HTML tree, and maybe editing some CSS, so just after normal use, The selected element will stay highlighted, even though I'm no longer hovering over it in the Inspector window. I added a screenshot to show what I mean. This bug is annoying because when editing CSS, I want to be able to clearly see the changes I mean, but now theyre obstructed by the highlight. Toggling developer tools by pressing F12 twice fixes this obviously, but only for a couple of minutes, and sometimes the problem return immidiatly. This problem first emerged in Firefox Developer Edition about a month ago after an update. It really messes with my workflow, and I couldnt find a solution. Tee problem emerged on multiple websites (not just the ones a was developing, as you can see in my screenshot it also happens on the mozzila website) and the problem was the same accros multiple computers (all modern windows 10 machinary, owned by me or my collegues). So I stopped using Developer Edition, and switched to using 'regular' Firefox for developing, as regular Firefox did not exibit this bug. But since last week, after regular Firefox also got an update, the bug appears in regular Firefox aswell. So here I am, an avid Firefox Developer Edition user, desperate for a solution. Ofcourse I already tried everything from reïnstalling, refreshing firefox, everything. Thanks
Attached screenshots

Chosen solution

Hmm, I haven't noticed this yet.

The Dev Tools team has a forum over here:

https://discourse.mozilla.org/c/devtools

Read this answer in context 👍 0

All Replies (2)

more options

Chosen Solution

Hmm, I haven't noticed this yet.

The Dev Tools team has a forum over here:

https://discourse.mozilla.org/c/devtools

more options

I have the same problem

It occurs when i move quikly my cursor out of the element declaration in devtools, and the blueish thing don't disappear like it should do

I think it's just that the highlighting disappear when the cursor leave the element declaration, but when the cursor leave it too fast, the event or anything isn't called, so it's like we didn't leave the area

btw I'm on Windows, Firefox 83.0 (64-bit)

And it's really annoying

PS: sorry if there is some synatax error in my post i'm not english :) PPS: sorry to jscher2000, i miss click on down vote

Modified by Ora_