Javascript 将鼠标悬停在光标实际指向的最上面的子元素上，而不是所有祖先的父元素

场景：我希望能够将边框css应用于我所停留的确切元素，但实际情况是，它也将css应用于ts祖先的父母。[参考图片]。我不知道类，或者说整个html结构，它是动态的

我也读过关于stackoverflow的其他类似问题，但它们与我的场景并不完全匹配。有些人说，当鼠标悬停在父对象上时，在子对象上应用css，有些人预先知道类，等等

但是如果有人碰巧知道一个链接指向我需要的确切答案，请一定要让我知道

在这里你可以看到我指的是文本“条纹脚踝…”，但是悬停的css也发生在所有祖先的父母身上

我正在申请的css是

.root_div_class_name * :hover {
    border: 1px solid #e42a78;
}

EDIT我看到很多人指出，我使用的通用选择器是问题的原因，它将

hover

属性应用于网页中的所有标记。但可能会有一些误解，因为我仍然不认为这是一个问题。 我希望悬停属性应用于所有标记。只是当我将鼠标悬停在标记上时，我只想将边框应用于该标记，而不是其父标记。只有当我将鼠标悬停在父标记上时，边框才能应用于父标记

编辑就像我已经提到的，我不是在创建html。我已经得到了html，因此内容是动态的。我无法按照标记的重复链接上的解决方案的建议，进一步创建同级或更改结构。我不得不凑合一下，用CSS是不可能的。 使用JQuery的解决方案：

$（“.test*”）.mouseover(
职能（e）{
e、 停止传播（）；
$（此）.css（“边框”，“1px实心红色”）；
})穆塞特先生(
函数（）{
$（this.css（“边框”、“透明”）；
}
);

同侧眼线

删除


一个


一个
两个



起初，我在寻找纯CSS解决方案。我能找到的最好的答案是：


因为我不是CSS专家，所以我仍然必须理解它，并围绕它开展工作。但在那之前，jquery为我做这项工作。这是我使用的代码

$('.root_div_class_name').mouseover(function(e){
    $(e.target).css("border", "1px solid #e42a78")
})

$('.root_div_class_name').mouseout(function(e){
    $(e.target).css("border", "")
})

因为
*：hover{border:1px solid#e42a78；}
这适用于域中的所有元素只要一个简单的建议，首先阅读css选择器，然后您将自己找到解决方案。P.S.-*是一个通用选择器，因此它将选择我使用的文档中的所有元素*，以便悬停属性在文档中的所有标记上都可用…因为我可以悬停在任何标记上。但是现在我在任何一个标签上徘徊，我的问题来了@你认为你只停留在一个标签上，但没有。。。阅读更多有关悬停如何工作以及如何捕获事件等的信息。。。你认为你有一个问题，但这是CSS的正常行为，所以请阅读更多关于它的内容。这可能很有用：我已经尝试过了……我的代码编辑类似于
。class_name*{/*border property*/}
我在问题中陈述的原始问题仍然存在，没有。做一件事，在最后一个之后添加一个带有一些元素的ul标签。类似于……删除
one
two
。现在您将看到，当您将鼠标悬停在
标记1和标记2上时，它会在
和
上创建一个边框。看到了吗？将鼠标悬停在子对象上，同时为其父对象创建边框。这就是我不想要的。关于这一点，我已经在这里发布了jquery解决方案，这是一个完美的解决方案（目前）。同样，您的代码是正确的，但在我的用例中仍然遗漏了一些东西。无论如何，thnx:）