如何使用jQuery添加hover事件处理程序 仅作用于同一父级的兄弟元素

原代码失效原因 #

你原来使用的$(".read-more-a-black", this)写法是查找当前.single-holder-image元素的后代节点，但你的HTML结构里，.read-more-a-black和.single-holder-image同属于.single-post-holder父容器，是兄弟节点的后代，所以找不到对应元素，自然不生效。不需要调整现有HTML结构，仅调整jQuery的查找逻辑即可。

修复后的hover图片修改标题颜色代码 #

$(function() {
  $(".single-holder-image").hover(function() {
    // 先定位到当前元素所属的整组父容器，再限定范围查找对应标题，不会影响其他组元素
    $(this).closest('.single-post-holder').find(".read-more-a-black").css('color', '#a2d0ba');
  }, function() {
    $(this).closest('.single-post-holder').find(".read-more-a-black").css('color', '');
  });
});

hover标题触发对应图片缩放的实现 #

可以先加一段CSS让缩放效果更流畅：

/* 避免图片缩放超出容器，添加过渡动画 */
.single-holder-image {
  overflow: hidden;
}
.single-holder-image img {
  transition: transform 0.3s ease;
}

对应的jQuery代码（可以和上面的逻辑合并）：

$(function() {
  // hover图片修改对应标题颜色
  $(".single-holder-image").hover(function() {
    $(this).closest('.single-post-holder').find(".read-more-a-black").css('color', '#a2d0ba');
  }, function() {
    $(this).closest('.single-post-holder').find(".read-more-a-black").css('color', '');
  });

  // hover标题触发对应图片缩放
  $(".read-more-a-black").hover(function() {
    $(this).closest('.single-post-holder').find(".single-holder-image img").css('transform', 'scale(1.1)');
  }, function() {
    $(this).closest('.single-post-holder').find(".single-holder-image img").css('transform', 'scale(1)');
  });
});

内容的提问来源于stack exchange，提问作者Danijel J.