0

I was wondering if anyone can help me with another problem I have with get an image to hover over an element? I been working with my code and I now have my "p" elements in a div element with my images. Now, I trying to work again with my css code to try to get my images to appear when you hover over certain "p" elements. I thought it maybe easier to get the hover to work, if my "p" elements and images were in the same div element together but it not work. Anyone have any suggestions?

Thanks

My code:

.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>
Vishal Taj PM
  • 1,223
  • 10
  • 20
Mike
  • 75
  • 9
  • Remove the `p` element and your CSS will work. – Paulie_D Sep 06 '18 at 15:08
  • Hey @Paulue_D, thanks for the reply. I tried it without the p element and it the text disappears and mess up the layout of my page. Is there any way to fix it without the p element and changing the css code? Thanks – Mike Sep 06 '18 at 15:16
  • You can't go hover things inside the `p` to affect elements outside it. You could put the images *inside* the `p` though... – Paulie_D Sep 06 '18 at 15:17
  • Hi, @Paulie_D, thanks you the reply. I will look into the p elements and images. Thank you for the idea! – Mike Sep 06 '18 at 15:35

0 Answers0