<分区>
标签 javascript css sass
<分区>
我有一个场景，当在子元素的 hover 上时，我想将样式附加到父元素。我的代码可以在下面看到，以及 here :
html:
<body>
<div>
<span>hover</span>
</div>
</body>
scss:
span:hover{
div{
border:1px solid red;
}
}
将鼠标悬停在子文本上时，我需要为父 div 设置边框。但事实并非如此。任何帮助将不胜感激。
最佳答案
不能简单地遍历 CSS 中的 DOM。您将需要使用 JavaScript 或 jQuery。
这是一篇解释原因的文章:http://snook.ca/archives/html_and_css/css-parent-selectors
TLDR，这是由于浏览器读取 CSS 的方式造成的，如果我们向上遍历 DOM，它会将性能损失提高 10 倍(至少!)，因为它需要读取每个节点多次检查它是否符合配置文件。因此，它根本不可行。
Javascript 方式
document.getElementById("child").onmouseover = function() {
this.parentNode.style.border = "1px solid red";
}<body>
<div id="parent">
<span id="child">hover</span>
</div>
</body>jQuery 方式
$("#child").hover(function() {
$(this).parent().css("border", "1px solid red");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="parent">
<span id="child">hover</span>
</div>
</body>关于javascript - 将鼠标悬停在子元素上并在父元素上附加 scss，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42851042/