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-container img内没有.project-content。

目前CSS中没有向后选择方法，因此您必须根据.project-container:hover > img进行转换，或使用javascript在悬停时选择父级。

Answer 2

感谢我到目前为止所得到的所有答案。让我明白了＆gt; css选择器好一点。而@jaimin Moslake给出的答案指出了我正确的方向。我已经考虑过它并尝试过它，但不是以正确的方式。在jaimin moslake他的回答之后我再次尝试了它并做了一些改变并且继续：

$(".project-content").hover(function() {
    $(this).siblings().toggleClass("gray");
});

我不确定这是否是最正确的方法，但它有效。

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

2 个答案: