如何用CSS/jQuery/JS为单个a标签下多元素设置不同hover样式

CSS实现方案（优先推荐） #

纯CSS即可实现需求，无需引入JavaScript代码：

/* 鼠标hover到img时，匹配同a标签下img后续的h5元素设置为蓝色 */
.panel a img:hover ~ h5 {
  color: blue;
}
/* 鼠标hover到h5时自身设置为红色 */
.panel a h5:hover {
  color: red;
}

jQuery实现方案 #

原有代码存在3个核心问题：

• 事件绑定对象错误，hover事件绑定到了父级a元素上，没有分别绑定给img和h5元素
• 全局选择器$("h5")会选中页面所有h5元素，需要限定为当前触发事件的元素所属父级下的对应h5
• 给img元素设置color属性无效，color是文本样式属性，img元素本身不支持该属性
  正确实现代码：

// 绑定img的hover事件
$(".panel a img").hover(
  function() {
    // 找到当前img同父级下的h5设置蓝色
    $(this).siblings("h5").css("color", "blue");
  },
  function() {
    // 鼠标移出时恢复默认颜色，可根据你的原有设计调整值
    $(this).siblings("h5").css("color", "");
  }
);

// 绑定h5的hover事件
$(".panel a h5").hover(
  function() {
    $(this).css("color", "red");
  },
  function() {
    // 鼠标移出时恢复默认颜色
    $(this).css("color", "");
  }
);

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