少父：悬停没有另一个选择器

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>

简单来说：我想将a 中的img 设置为grayscale:1。当 img 的父级（a 标签）上的用户 :hover 将图像设置为 grayscale:0。

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

Answer 1

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

否，目前您不能将a 的:hover 选择器嵌套在img 块内，因为目前每当我们使用&（父选择器）时，它总是指的是最顶层的完整父级。

唯一的选择是将其嵌套在a 中，就像下面的 sn-p 一样。

.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 {
  -webkit-filter: grayscale(1);
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}
.gray-images > li > a:hover {
  -webkit-filter: grayscale(0);
}

<ul class="gray-images">
  <li>
    <a href="#href">
      <img src="http://lorempixel.com/100/100/nature/1" height="100">
    </a>
  </li>
</ul>