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>