Question

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

HTML：

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

SCSS：

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

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

Answer 1

不能简单地遍历CSS中的DOM。您将需要使用JavaScript或jQuery。

这篇文章解释了原因：http://snook.ca/archives/html_and_css/css-parent-selectors

TLDR，这是由于浏览器读取CSS的方式，如果我们要遍历DOM，它会将性能提高10倍（至少！），因为它需要多次读取每个节点以查看它是否适合该配置文件。因此，它根本不可行。

Javascript方式

＆＃13;

document.getElementById("child").onmouseover = function() {
  this.parentNode.style.border = "1px solid red";
}

＆＃13;

<body>
  <div id="parent">
    <span id="child">hover</span>
  </div>
</body>

＆＃13;

jQuery方式

＆＃13;

$("#child").hover(function() {
  $(this).parent().css("border", "1px solid red");
});

＆＃13;

<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>

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

将鼠标悬停在子元素上并在父

2 个答案: