我刚给了一个解决方案：
https://***.com/a/21598914/1828637

我在我的插件中做了同样的事情，我希望很快就会发布。

当你移动到输入字段的中间时，mouseout事件不应该触发，这很奇怪。

$ b $如果这真的发生，然后在鼠标悬停在输入字段上，然后添加一个MouseLeave事件，（与moustEnter事件相反）

这样还是给body添加事件listener for mouseoever，当一个元素是mousedover，那么它应该取消勾画先前选定的元素（这是为了鲁棒性），并应添加一个mouseleave事件，将取消它自己的轮廓。

https://developer.mozilla.org/zh-CN/docs/DOM/DOM_event_reference/mouseenter

I am creating a Firefox extension that gets some information about an element on a webpage (say, the element's id attribute), upon clicking said element. I also would like to implement a feature in which hovering over the element will highlight it.

There are some existing solutions that essentially already do this. It seems that these existing solutions (such the "Select element with mouse" feature in Firefox's "Inspector" tool) essentially make use of two event listeners:

• A mouseover listener: Highlights whatever element you move your mouse over an element.
• A mouseout listener: Removes the highlighting when you move your mouse off of an element. (Otherwise, as you move your mouse over the whole page, eventually everything will be highlighted!)

I have attempted to make my own implementation which uses those two listeners (onmouseover and onmouseout). The highlighting is applied in the same manner as the linktargetfinder in this tutorial: whenever we want an element to be highlighted, we add a link-target-finder-selected property to the element's class attribute. A link reference to the CSS file is put into the head of the HTML document and refers to this CSS code:

.link-target-finder-selected {
    outline: 2px solid red !important;
}

This implementation is very close to what we want, but unfortunately, there are a few (most likely related) issues.

First, with text boxes, the highlighting only applies when the mouse is on the border of the text box. Once you move into the interior of the text box, apparently the mouseout event is triggered -- the highlighting disappears, even though it is clear to you or me that the mouse is actually still hovering over the text box. It seems that I need to somehow force the mouseout event to not trigger until you move the mouse completely outside of the text box.

Second, I am having a very similar issue with multiple-select boxes. But I also want the behavior for multiple-select boxes to be somewhat nonstandard. The actual behavior is that a mouse-over will highlight the select box; the highlight will disappear as you begin to move inside the select box, and then the options within the select box will get highlighted as you move over them. Instead, I would like my add-on to function such that, upon entering the select box, the box will be highlighted, and nothing else will be highlighted or highlighted until the mouse leaves the entire box. The solution to this should essentially be the same as the solution to the text box issue.

Please let me know if you have any ideas for how I can fix these issues.

I just gave a solution to this: https://***.com/a/21598914/1828637

I do the same thing in my addon which i hope to release soon.

the mouseout event should not trigger when you move into the middle of a input field, thats weird.

if that really happens then on mouseover the input field, then add a MouseLeave event, (opposite of moustEnter event)

so still to the body add the event listener for mouseoever, and when an element is mousedover then it should un-outline the previously selected element (this is for robustness) and should add a mouseLeave event that will un-outline itself.

https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/mouseenter