javascript - 使用 jQuery 更改一个元素的 CSS 不起作用

Question

我有几个元素，我想在悬停时更改它们的灰度。我不想同时更改所有这些(因为它们具有相同的类)我只想更改当前悬停的那个。

所以我写了下面的代码:

tpj(".cftoverlay").hover(function(){
    tpj(this).find(".hoverBorderWrapper > img").css("filter","grayscale(0%)");
    console.log("test");
},function() {
    tpj(this).find(".hoverBorderWrapper > img").css("filter","grayscale(100%)");
    console.log("test1");
});

控制台日志有效，但出于某种原因，其余代码无效。我做错了什么？

我的 html 结构:

<span class="cftoverlay">
    <img src="images/overlay.png">
</span>
<span class="hoverBorderWrapper">
    <img width="750" height="350" src="cms/images/afbeeldingen/artikelen/IMG-20170208-WA0021.jpg" class="img-responsive big-featuredarticles" alt="css3panels-alt-04" title="css3panels-alt-04">
    <span class="theHoverBorder"></span>
</span>

无论如何图像都保持灰度，因为我添加了一些 css，所以当它没有悬停时它是灰度的，但是 jquery 添加的内联 css 应该总是覆盖它，对吗？

悬停它时，我可以看到元素检查器中的这一行发生了一些变化:

<span class="cftoverlay">

但是没有在任何地方添加 css。

Answer 1

我假设 tpj 是对 jQuery 的引用。如果是这样，您的问题是因为 .hoverBorderWrapper 不是 .cftoverlay 的子级，而是兄弟级。您需要使用 next() 来检索它而不是 find():

tpj(".cftoverlay").hover(function(){
    tpj(this).next(".hoverBorderWrapper > img").css("filter", "grayscale(0%)");
    console.log("test");
}, function() {
    tpj(this).next(".hoverBorderWrapper > img").css("filter", "grayscale(100%)");
    console.log("test1");
});

也就是说，我根本不会为此使用 JS。 CSS 更适合在 hover 事件下进行样式更改:

.hoverBorderWrapper > img {
  filter: grayscale(100%)
}
.cftoverlay:hover + .hoverBorderWrapper > img {
  filter: grayscale(0%)
}