将鼠标悬停在缩略图文本上时，去饱和 CSS 效果无效答案

【问题标题】：Desaturation CSS effect void when thumbnail text is hovered over将鼠标悬停在缩略图文本上时，去饱和 CSS 效果无效
【发布时间】：2016-01-10 06:48:05
【问题描述】：

我不确定这是否可行，但我希望在缩略图文本滚动时使我的缩略图按钮不饱和。目前，我正在调用我的 Wordpress 帖子标题，以在帖子特色图片缩略图悬停时出现。当缩略图本身悬停在上面时，css 效果就很好了。但是，如果我将鼠标悬停在缩略图的文本上，效果就会被破坏。有没有办法解决这个问题？

 .article-preview-image img:hover {
   -webkit-filter: grayscale(100%) brightness(0.5);
   -moz-filter: grayscale(100%) brightness(0.5);
   -ms-filter: grayscale(100%) brightness(0.5);
   -o-filter: grayscale(100%) brightness(0.5);
   filter: grayscale(100%) brightness(0.5);
   -webkit-transition: all .4s;
   -moz-transition: all .4s;
   -ms-transition: all .4s;
   -o-transition: all .4s;
   transition: all .4s;
 }

<figure class="article-preview-image">
  <a href="http://cks.whiterabbitstudio.us/tara-temple/">
    <img width="190" height="189" src="http://cks.whiterabbitstudio.us/wp-content/uploads/2015/10/tarathumb.jpg" />
  </a>
  <h1 class="title">
                <a href="http://cks.whiterabbitstudio.us/tara-temple/">Tara Temple</a>
            </h1>
</figure>

如果 CSS 无法做到这一点，我愿意使用 javascript，但我不知道在哪里可以找到简单的教程或 sn-p。我对java不是很熟悉。

【问题讨论】：

标签： html css

【解决方案1】：

你几乎是正确的。目前，您将效果应用于img:hover。相反，您可以将其应用于位于.article-preview-image:hover 中的img，如下所示。

img { /* Universal settings */
    -webkit-transition:all .4s;
    -moz-transition:all .4s;
    -ms-transition:all .4s;
    -o-transition:all .4s;
    transition:all .4s;
}

.article-preview-image:hover img {
    /* When the article preview thing is being hovered, grayscale the image */
    -webkit-filter:grayscale(100%);
    -moz-filter:greyscale(100%);
    -ms-filter:greyscale(100%);
    -o-filter:greyscale(100%);
    filter:grayscale(100%);
}

【讨论】：

谢谢！您提供的代码实际上并没有工作，但您的评论是有道理的，所以我只是将“.article-preview-image img”换成了“figure”，这就成功了。所以，最终的工作是： figure:hover { -webkit-filter:grayscale(100%) brightness(0.5); -moz-filter：灰度（100%）亮度（0.5）； -ms-filter：灰度（100%）亮度（0.5）； -o-filter：灰度（100%）亮度（0.5）；过滤器：灰度（100%）亮度（0.5）； }
有没有办法使翻转文本不受DIV覆盖的影响？它应该是白色的，但亮度效果会将其降为灰色。
您遇到的错误是什么？在我的实验中，我提供的代码正是这样做的。我们不将灰度效果应用到img:hover，而是将其应用到位于.article-preview-color:hover 中的img。
啊哈！好的，所以你从一开始就确定了它。我只是有一个冲突的标签，阻止我看到它的表现。再次感谢！请不要介意我之前的“修复”，不是这样的！
没问题，有周到的反馈总是很高兴。我更新了我的答案，以更清楚地反映它是如何工作的。

【解决方案2】：

CSS 解决方案：

   .article-preview-image:hover img {
    -webkit-filter:grayscale(100%);
    -moz-filter:greyscale(100%);
    -ms-filter:greyscale(100%);
    -o-filter:greyscale(100%);
    filter:grayscale(100%);
}

【讨论】：

这是我已经拥有的，对吧？还是我错过了什么？