较少父级：悬停而无需另一个选择器

Question

我在这里阅读了很多关于这个主题的问题（1、2、3等），但我没有找到像我这样的确切案例。

所以我想将样式设置为元素，但当父级位于:hover.

像这样的东西：

较少的

.gray-images > li > a {
  img {
    -webkit-filter: grayscale(1);
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;

    selector { /* <-- That's what I'm looking for I want to override it when the user hover on the `a` element */
      -webkit-filter: grayscale(0);
    }
  }
}

html

<ul class="gray-images">
  <li>
    <a href="#href">
      <img src="the_src" height="20"></a>
  </li>
</ul>

简而言之：我想将img内部 a设置a为grayscale:1。当用户:hover在 img 的父级（标签a）上将图像设置为grayscale:0.

我知道有一些技巧，比如将父级的选择器定义为变量并使用它两次。但我的问题是是否有一种“直接”的方法来做到这一点。谢谢！

Answer 1

较少嵌套和父选择器问题的答案：

不，目前您无法在块内嵌套:hover选择器，因为当前每当我们使用（父选择器）时，它总是引用最顶层的完整父级。aimg&

唯一的选择是将其嵌套a在下面的代码片段中。

.gray-images > li > a {
  img {
    -webkit-filter: grayscale(1);
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
  }
  &:hover img { 
    -webkit-filter: grayscale(0);
  }  
}

替代解决方案：（与 Qn 中链接的内容类似的额外答案背后的主要动机）

如果结构与您在问题中提到的完全一样（即，a只有 且img没有额外的内容）并且没有额外的边距，那么您可以像下面那样执行此操作（基本上将过滤器应用于自身a而不是img）。

.gray-images > li > a {
  -webkit-filter: grayscale(1);
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  &:hover {
    -webkit-filter: grayscale(0);
  }  
}

.gray-images > li > a {
  img {
    -webkit-filter: grayscale(1);
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
  }
  &:hover img { 
    -webkit-filter: grayscale(0);
  }  
}

.gray-images > li > a {
  -webkit-filter: grayscale(1);
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  &:hover {
    -webkit-filter: grayscale(0);
  }  
}