我一直在寻找这个，我只是找不到正确的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 */;}
我希望你们能在这里帮助我。
该>选择将只能选择元素的直接孩子，在这种情况下，没有.project-container img内.project-content。
目前CSS中没有向后选择方法，因此您将不得不以过渡为基础，.project-container:hover > img或者使用javascript在悬停时选择父级。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句