将鼠标悬停在子元素上并在父元素上附加 scss [重复]答案

【问题标题】：Hover on child element and append scss on parent [duplicate]将鼠标悬停在子元素上并在父元素上附加 scss [重复]
【发布时间】：2017-03-17 16:54:20
【问题描述】：

我有一个场景，在子元素的hover 上，我想将样式附加到父元素。下面可以看到我的代码，还有here：

html：

  <body>
    <div>
      <span>hover</span>
    </div>
  </body>

scss：

 span:hover{
   div{
     border:1px solid red;
   }
 }

将鼠标悬停在子文本上时，我需要为父 div 设置边框。但事实并非如此。任何帮助将不胜感激。

【问题讨论】：

查看Question

标签： javascript css sass

【解决方案1】：

不能简单地在 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>

【讨论】：

我们不能使用 scss 吗？
scss 只是一个 css 预处理器，它呈现代码并编译为浏览器可以理解的 css。所以不，它不能在 css 中完成，也不能在它的任何预处理器中完成。

【解决方案2】：

$(function() {
  $("div span").hover(function() {
    $(this).parents('div').toggleClass("myClass");
  });
})

.myClass{
border:1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>hover</span>
</div>

【讨论】：

abak 我们不能用 scss 来做吗