来自孩子

Question

我目前正在学习SASS，所以如果这看起来很明显，请不要笑！ 我有一个无序列表，在li＆gt;悬停ul背景的变化。 更改链接背景很简单，但如何定位ul元素？我尝试过使用＆amp;，〜和＆lt;已经在几个在线教程中得到了建议，但我没有运气。任何和所有的帮助将不胜感激，谢谢。

ul {
  margin: 0;
  padding: 0;

  li {
    margin: 0;
    padding: 0;
    list-style: none;

    a {
      margin: 0;
      padding: 0;
      display: block;
      font-size: 60px;
      font-size: 3.75rem;
      color: rgb(255,255,255);
      font-family: 'Cera PRO Medium';
      text-decoration: none;

      &:hover & li & ul {
        background-color: red;
      }

    }
  }
}

Answer 1

如果我理解您的问题，只需将悬停属性添加到ul元素：

ul {
  margin: 0;
  padding: 0;

  &:hover {
    background-color: red;
  }
  ...

https://fiddle.jshell.net/fo214wkd/

Answer 2

即使使用SASS，也无法使用普通的CSS实现。您需要使用jQuery或其他JavaScript替代方案来实现此目的。

在CSS Level 4 draft中有一个:has伪选择器可以实现这一点，但这只是目前的梦想。

我知道这不是一个jQuery问题，但是一个非常基本的jQuery示例是：

$j("a").on("mouseover", function() {

    $j(this).parent("ul").addClass("hovering");

}), (function() {

    $j(this).parent("ul").removeClass("hovering");

});