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设置为grayscale:1。当img的父级用户:hover（a标记）将图像设置为grayscale:0时。

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

Answer 1

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

否，目前您无法将:hover的{{1}}选择器嵌套在a块中，因为目前我们只使用{{1} （父选择器）它总是引用最顶层的完整父级。

唯一的选择是将其嵌套在img中，如下面的代码段所示。

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

如果结构与您在问题中提到的完全一致（即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); } }且没有额外内容）且没有额外的边距，那么您可以像下面这样做（基本上将过滤器应用于a本身而不是img）。

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);
  }  
}

较少父级：悬停而没有其他选择器

1 个答案: