Hovering over text and display image in another div and the image stays-CodePudding

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 >
<p style="padding-left: 320px;"><a href="link1"><strong>menuitem1</strong></a></p>
</div>
<div >
<p style="padding-left: 320px;"><a href="link2"><strong>menuitem2</strong></a></p>
</div>
<div >
<p style="padding-left: 320px;"><a href="link3"><strong>menuitem3</strong></a></p>
</div>
<div >
<p style="padding-left: 320px;"><a href="link4"><strong>menuitem4</strong></a></p>
</div>
<div >
<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.

CodePudding user response：

function setURL(newUrl){
var url=newUrl
return function(){
    document.getElementById('picture').setAttribute('src',url);
    }
    }
document.getElementById('text1').addEventListener('mouseover',setURL('https://upload.wikimedia.org/wikipedia/commons/8/8f/Example_image.svg'));
document.getElementById('text2').addEventListener('mouseover',setURL('https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg'));

.container{
    width:200px;
    display:flex;
    margin-left:auto;
    margin-right:auto;
    }
.container > div{
    width:50%;
    }
img{
    width:30px;
    height:30px;
    }

<div >
<div>
<p id="text1">picture1</p>
<p id="text2">picture2</p>

</div><!--END TEXT-->

<div>
    <img id="picture" src="">
</div><!--END PICTURE-->
</div><!--END CONTAINER-->

CodePudding user response：

The only way to do this is through using JavaScript and the mouseOver function, Set the display to none and once the h1 is hovered over it runs the function mouseOver() which sets the span display to block(visible). You can also set the state after such as adding a class to the span which makes it close after a couple of seconds automatically.

  <h1 id="demo" onm ouseover="mouseOver()" onm ouseout="mouseOut()">Mouse 
over 
me</h1>
<span id="span" style="display:none;">Hey! Click me to close</span>
<script>
function mouseOver() {
  document.getElementById("span").style.display = "block";
}

function mouseOut() {

}

window.onclick = function(event) {
  if (event.target == span) {
    span.style.display = "none";
  }
}
</script>