时间戳

首页 > 解决方案 > 文字悬停时如何更改图片的属性？

javascript - 文字悬停时如何更改图片的属性？

问题描述

当某些文本悬停时，我想对我网站的一些图片进行更改。具体来说，当 h6 inside section，父行类内部悬停时，我希望内部a，内部部分，内部父行类的图像得到灰度。

我在其他线程中读到，您可能会以不同的方式影响兄弟姐妹和父母，我尝试了建议的方法，但没有一个有效（可能是因为我不完全理解它是如何完成的）。

这是一些解释我想要做的伪代码。当然，它不起作用，因为这样的嵌套是不可能的。

.row > section > h6:hover {
    .row > section > a > img {
        filter: grayscale(100%);
    }
}

我想问一下我想做的事情是否可行，如果可以，怎么办？也可以接受使用 JavaScript 的解决方案，但最好尽可能仅使用 CSS。

编辑：这是一个快速的小提琴：https ://jsfiddle.net/pjo4yxLk/2/

我希望当我将 Field1 和 Field 2 悬停时，两张图片都得到灰度。

标签： javascripthtmlcss

解决方案

这不是正确的语法。如果H6和A 标签在section 标签内，它会是这样的：

.row > section > h6:hover + a > img { filter: grayscale(100%); }

由于A 标签是H6 标签的下一个兄弟，你必须使用+选择器来调用它。

推荐阅读