html - 将另一个元素悬停在其中时，将图像更改为黑白

Question

我一直在寻找这个，但我找不到正确的工作 CSS/jQuery。

当我将鼠标悬停在图像上时，我正试图将其更改为黑白图像。到目前为止，一切都很好。但是一旦我将内容放在该图像的顶部并将其悬停，它就会恢复到正常颜色

<div class="uk-float-left uk-width-1-4 project-container">
    <img width="300" height="288" src="project1.jpg" class="attachment-post-thumbnail wp-post-image" alt="project1">
    <div class="hidden-content project-content"> 
        <div class="project-button center-absolute"> 
            
        </div>
        <div class="project-name">
            <?php echo get_the_title( $post_id ); ?> 
        </div>
    </div>
</div> 

我尝试过的

.project-content:hover > .project-container img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(grayscale.svg); /* Firefox 4+ */
filter: gray; /* IE 6-9 */;}

我希望你们能帮帮我。

Answer 1

> 选择器只会选择元素的直接子元素，在这种情况下，.project-content 中没有 .project-container img 。

目前 CSS 中没有向后选择方法，因此您必须将过渡基于 .project-container:hover > img 或使用 javascript 在悬停时选择父对象。