I am facing a lot of problem in my attempt to display image in another div when someone hover over a text. I have a menu where there is a list of 5 text lines. I want to display different images at the same position for each hover over these text lines. I managed to display images on hover with CSS but they disappear on unhovering. I want that the images stays after a user hovered over one text and then when the user hovers over another text, related image gets displayed at the same position. I tried some other layout as well but that was not responsive to device size.
Here is my current code:
<p><style>
.parent > p:hover:after {
width: 5px;
content: url(image1.png);
position: absolute;
z-index: 2;
left: 800px;
bottom: 8px;
}
.parent1 > p:hover:after {
width: 5px;
content: url(image2.png);
position: absolute;
z-index: 2;
left: 800px;
bottom: 8px;
}
.parent2 > p:hover:after {
width: 5px;
content: url(image3.png);
position: absolute;
z-index: 2;
left: 800px;
bottom: 8px;
}
.parent3 > p:hover:after {
width: 5px;
content: url(image4.png);
position: absolute;
z-index: 2;
left: 800px;
bottom: 8px;
}
.parent4 > p:hover:after {
width: 5px;
content: url(image5.png);
position: absolute;
z-index: 2;
left: 800px;
bottom: 8px;
}
</style></p>
<div class="parent">
<p style="padding-left: 320px;"><a href="link1"><strong>menuitem1</strong></a></p>
</div>
<div class="parent1">
<p style="padding-left: 320px;"><a href="link2"><strong>menuitem2</strong></a></p>
</div>
<div class="parent2">
<p style="padding-left: 320px;"><a href="link3"><strong>menuitem3</strong></a></p>
</div>
<div class="parent3">
<p style="padding-left: 320px;"><a href="link4"><strong>menuitem4</strong></a></p>
</div>
<div class="parent4">
<p style="padding-left: 320px;"><a href="link5"><strong>menuitem5</strong></a></p>
</div>
I am sorry if I made some mistake. My technical knowledge is not that much.