javascript - 如何使用 JavaScript、jQuery 或 CSS 将鼠标悬停在单个 <a> 标记下的各种元素上时添加不同的样式

Question

这是我的代码，在添加样式时遇到问题:

<div class="panel">
  <a href = "link">
    <img src="abc.jpg"> 
    <h5>Description text</h5>
  </a>
</div>

要求:

1. 当鼠标悬停在图像上时，H5 文本颜色可以更改为蓝色。
2. 当鼠标悬停在 H5 文本上时，文本颜色会变为红色。

欢迎您使用 JavaScript、jQuery 或 CSS 进行修复

我的尝试是:

$(".panel a").hover( 
function() { $("h5").css("color","red"); } ); 
$(".panel a").hover( 
function() { $("img").css("color","blue"); } );

Answer 1

也许这就是您想要实现的目标，但我建议如果您不需要 a 来包装整个内容，而不仅仅是在 h5 中进行点击，则替换 h5 与a 因为您当前的布局需要更多工作才能实现简单的事情

a {text-decoration:none;}
h5 {text-decoration:underline;color:black;width:max-content;}

h5:hover {
  color:red;
}

img:hover + h5 {
  color:blue;
}

<div class="panel">
<a href = "link">
<img style="height:120px;" src="https://i.ibb.co/hLZrDv0/Hitman-3-artwork.png"> 
<h5>Description text</h5>
</a>
</div>

这是我建议的布局

a{color:black;}
.panel > * {display:block;width:max-content;}
a:hover {
  color:red;
}

img:hover + a {
  color:blue;
}

<div class="panel">
<img style="height:120px;" src="https://i.ibb.co/hLZrDv0/Hitman-3-artwork.png"> 
<a href = "link">Description text</a>
</div>