如何将图像悬停在同一div元素中的元素上？

Question

我想知道是否有人可以帮助我解决将图像悬停在某个元素上的问题？我一直在使用代码，现在在带有图像的div元素中包含“ p”元素。现在，我尝试再次使用CSS代码尝试将鼠标悬停在某些“ p”元素上时显示我的图片。我认为，如果我的“ p”元素和图像位于同一个div元素中却无法正常工作，使悬停工作可能会更容易。 有人有建议吗？

谢谢

我的代码：

.HL1 {
  position: absolute;
  top: 100px;
  left: 330px;
  height:50px;
  width: 150px;
  visibility:hidden;
}

.HL2 {
  position: absolute;
  top: 100px;
  left: 565px;
  height:50px;
  width: 150px;
  visibility:hidden;
}

.HL3 {
  position: absolute;
  top: 100px;
  left: 800px;
  height:50px;
  width: 150px;
  visibility:hidden;
}

.HL4 {
  position: absolute;
  top: 100px;
  left: 1050px;
  height:50px;
  width: 150px;
  visibility:hidden;
}

.m1:Hover ~ .HL1 {
  visibility:visible;
}

.m2:Hover ~ .HL2 {
  visibility:visible;
}

.m3:Hover ~ .HL3 {
  visibility:visible;
}
    
Div m4:Hover ~ .HL4 {
  visibility:visible;
}

<Div>
  <p id="Ms" align="center">
    <a class="m1" href="#">Home</a>
    <a class="m2" href="Bio.html">About</a> 
    <a class="m3" href="Services.html">Services</a>
    <a class="m4" href="Contact.html">Contact</a>
  </p>
  <img src="../Online Portfolio site/images/header highlight.jpg" class="HL1" width="150" height="50" />
  <img src="../Online Portfolio site/images/header highlight.jpg" class="HL2" width="150" height="50" />
  <img src="../Online Portfolio site/images/header highlight.jpg" class="HL3" width="150" height="50" />
  <img src="../Online Portfolio site/images/header highlight.jpg" class="HL4" width="150" height="50" />
 </Div>