css - 减去父级 :hover without another selector

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。当用户 :hover 在 img 的父级(a 标记)上时，将图像设置为 grayscale:0。

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

Answer 1

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

否，目前您无法将 a 的 :hover 选择器嵌套在 img 中 block ，因为目前每当我们使用 & (父选择器)时，它总是引用最顶层的完整父级。

唯一的选择是将其嵌套在 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 {
  -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>