Question

我不确定这是否可行，但是当缩小缩略图文本时，我希望我的缩略图按钮不饱和。目前，我正在调用我的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，但我不知道在哪里寻找简单的教程或片段。我对java不是很熟悉。

Answer 1

你几乎是对的。目前，您将效果应用于img:hover。相反，您可以将其应用于位于img的{{1}}，如下所示。

.article-preview-image:hover

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

当缩略图文本悬停在

2 个答案: