我一直在寻找这个,但我找不到正确的工作 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-content 中没有
。.project-container img
目前 CSS 中没有向后选择方法,因此您必须将过渡基于 .project-container:hover > img
或使用 javascript 在悬停时选择父对象。
关于html - 将另一个元素悬停在其中时,将图像更改为黑白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27379309/