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.
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" onmouseover="mouseOver()" onmouseout="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>
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 class="container">
<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-->