Html 样式最下面的悬停元素

我正在尝试重新创建类似chrome developer tools元素检查器的东西，在这里我可以获得当前悬停的元素

我想为页面上的每个元素添加一个悬停效果，如下所示：

：悬停{
边框：1px纯蓝！重要；
}

但问题是，它将向我显示在此之前的每个父元素，因为它们也处于悬停状态

：悬停{
边框：1px纯蓝！重要；
}

1
1.1
1.1.1
1.1.2
1.2
1.2.1
1.2.2

使用jQuery的

mouseenter

/

mouseleave

找到了一个解决方案：

$（“*”）
.mouseenter（函数（）{
$（this.addClass（“悬停”）；
$（this.parents（“.hovered”）.removeClass（“.hovered”）；
})
.mouseleave（函数（）{
$（此）.removeClass（“悬停”）；
$（this）.closest（“：hover”）.addClass（“hover”）；
});
。悬停{
边框：1px纯蓝！重要；
}

1.
1.1
1.1.1
1.1.2
1.2
1.2.1
1.2.2