我有几个元素,我想在悬停时更改它们的灰度。我不想同时更改所有这些(因为它们具有相同的类)我只想更改当前悬停的那个。
所以我写了下面的代码:
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。
最佳答案
我假设 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%)
}
关于javascript - 使用 jQuery 更改一个元素的 CSS 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48149466/