Javascript 当鼠标进入页面时，将类添加到页面上的任何元素，当鼠标离开时将其删除

我正在尝试创建一个小工具，用于检查浏览器中元素的

属性/样式


我有一个小脚本，它的主要目的是为当前鼠标下的每个元素添加一个类。问题是类永远停留在那里（本例中的大纲也是永久的）
我需要从每个不在
光标。基本上，我想要达到的是让它像
CSS中的
：悬停
选择器


是否有任何方法可以实现这一点，或者我一直在循环元素并逐个添加事件侦听器

我有点迷路了


document.addEventListener（'mousemove'，函数（e）{
e=e | | window.event；
e、 防止违约；
var target=e.target | | e.src元素，text=target.textContent | | target.innerText；
target.classList.add（'hovered'）；
//就为了这个例子
target.style.outline=“3px虚线#5555ff”；
}，假）
使用事件mouseover和mouseout执行操作

下面您可以看到，我添加了一个eventlistener，与您的相同，用于删除大纲样式

希望这能起到作用


document.addEventListener（'mouseover'，函数（e）{
e=e | | window.event；
e、 防止违约；
var target=e.target | | e.src元素，text=target.textContent | | target.innerText；
target.classList.add（'hovered'）；
//就为了这个例子
target.style.outline=“3px虚线#5555ff”；
}，假）；
文档.添加的列表器（'mouseout'，函数（e）{
e=e | | window.event；
e、 防止违约；
var target=e.target | | e.src元素，text=target.textContent | | target.innerText；
target.classList.add（'hovered'）；
//就为了这个例子
target.style.outline=“”；
}，假）
使用事件mouseover和mouseout执行操作

下面您可以看到，我添加了一个eventlistener，与您的相同，用于删除大纲样式

希望这能起到作用


document.addEventListener（'mouseover'，函数（e）{
e=e | | window.event；
e、 防止违约；
var target=e.target | | e.src元素，text=target.textContent | | target.innerText；
target.classList.add（'hovered'）；
//就为了这个例子
target.style.outline=“3px虚线#5555ff”；
}，假）；
文档.添加的列表器（'mouseout'，函数（e）{
e=e | | window.event；
e、 防止违约；
var target=e.target | | e.src元素，text=target.textContent | | target.innerText；
target.classList.add（'hovered'）；
//就为了这个例子
target.style.outline=“”；
}，假）
您可以使用
mouseleave
事件进行此操作

更多信息请参见此处：
您可以使用
mouseleave
事件进行此操作

请参阅此处的更多信息：
您正在添加一个类，而不是删除它，因此您可以创建另一个事件函数，该函数将在onmouseleave上触发，并提及这一点

target.classList.remove('hovered');

您正在添加一个类，而不是删除它，所以您可以创建另一个事件函数，该函数将在onmouseleave上触发，并提到这一点

target.classList.remove('hovered');

您可以使用jQuery
hover
event

$(element).hover(()=> { element.addClass('class') }, 
   () => {element.removeClass('class')})

您可以使用jQuery
hover
event

$(element).hover(()=> { element.addClass('class') }, 
   () => {element.removeClass('class')})


document.addEventListener（'mouseover'，函数（e）{
e=e | | window.event；
e、 防止违约；
var target=e.target | | e.src元素，text=target.textContent | | target.innerText；
target.classList.add（'hovered'）；
//就为了这个例子
target.style.outline=“3px虚线#5555ff”；
}，假）；
文档.添加的列表器（'mouseout'，函数（e）{
e=e | | window.event；
e、 防止违约；
var target=e.target | | e.src元素，text=target.textContent | | target.innerText；
target.classList.remove（'hovered'）；
//就为了这个例子
target.style.outline=“无”；
}，假）


document.addEventListener（'mouseover'，函数（e）{
e=e | | window.event；
e、 防止违约；
var target=e.target | | e.src元素，text=target.textContent | | target.innerText；
target.classList.add（'hovered'）；
//就为了这个例子
target.style.outline=“3px虚线#5555ff”；
}，假）；
文档.添加的列表器（'mouseout'，函数（e）{
e=e | | window.event；
e、 防止违约；
var target=e.target | | e.src元素，text=target.textContent | | target.innerText；
target.classList.remove（'hovered'）；
//就为了这个例子
target.style.outline=“无”；
}，假）


document.addEventListener（'mouseover'，函数（e）{
e=e | | window.event；
e、 防止违约；
var target=e.target | | e.src元素，text=target.textContent | | target.innerText；
document.queryselectoral（'div'）.forEach（elm=>{
elm.classList.remove（'hovered'）；
elm.style.outline=“3px实心透明”；
});
target.classList.add（'hovered'）；
target.style.outline=“3px虚线#5555ff”；
}，假）；
文档.添加的列表器（'mouseout'，函数（e）{
e=e | | window.event；
e、 防止违约；
var target=e.target | | e.src元素，text=target.textContent | | target.innerText；
target.classList.remove（'hovered'）；
//就为了这个例子
target.style.outline=“”；
}，假）；



document.addEventListener（'mouseover'，函数（e）{
e=e | | window.event；
e、 防止违约；
var target=e.target | | e.src元素，text=target.textContent | | target.innerText；
document.queryselectoral（'div'）.forEach（elm=>{
elm.classList.remove（'hovered'）；
elm.style.outline=“3px soli