使用jQuery修改单个元素CSS无效问题排查

嘿，我一眼就瞅到问题的关键啦！你的jQuery代码逻辑没问题，但元素选择器的关系找错了，导致根本没定位到目标图片，自然不会生效。

核心问题 #

你用了tpj(this).find(".hoverBorderWrapper > img")，但find()是查找当前元素的后代元素，可看你的HTML结构：

<span class="cftoverlay"> <img src="images/overlay.png"> </span> 
<span class="hoverBorderWrapper"> <img ...> </span>

.cftoverlay和.hoverBorderWrapper是同级兄弟关系，不是父子嵌套，所以find()根本找不到目标img元素，控制台日志能输出只是因为hover事件触发了，但样式修改的代码没作用在任何元素上。

修复方案 #

把find()换成兄弟元素选择器就行，这里给你两种靠谱的写法：

方案1：用siblings()匹配同级的.hoverBorderWrapper

tpj(".cftoverlay").hover(function(){
    // 找到当前.cftoverlay的同级.hoverBorderWrapper，再获取里面的img
    tpj(this).siblings(".hoverBorderWrapper").find("> img").css("filter","grayscale(0%)");
    console.log("test");
},function() {
    tpj(this).siblings(".hoverBorderWrapper").find("> img").css("filter","grayscale(100%)");
    console.log("test1");
});

方案2：用next()（如果.hoverBorderWrapper是.cftoverlay的下一个紧邻元素）

如果你的HTML结构里，.hoverBorderWrapper永远是.cftoverlay的下一个兄弟，用next()更高效：

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

额外排查点 #

如果按上面改了还是不生效，检查这两点：

• 先在hover事件里打印元素数量，确认能找到目标：console.log(tpj(this).siblings(".hoverBorderWrapper").length)，如果输出0，说明选择器还是有问题。
• 检查默认的灰度CSS有没有加!important，比如：

  .hoverBorderWrapper img { filter: grayscale(100%) !important; }
  

  如果加了!important，内联样式也覆盖不了，这时候要么去掉!important，要么在jQuery里用cssText强制覆盖（不推荐，尽量避免用!important）：

  tpj(this).siblings(".hoverBorderWrapper").find("> img").css("cssText","filter: grayscale(0%) !important;");
  

内容的提问来源于stack exchange，提问作者twan