CODEWITHSUNDEEP
javascripthtmlcss
officialrized
officialrized

Reputation: 13

Get an image to display when hovering over an div

I have a div tag that looks like this:

<div id="left">
    <p class="h1">EXCPERIENCES</p>

    <p class="describe">Websites, Ecommerce, Mobile Apps & <br />Installations</p>

    <img id="img1"src="ski.jpg" alt="ski">

</div>

I want the image (ski) to display when i hover over 

<div id="left">

and when I don't have the mouse over the "left" div the image should disappear.

This div called "left" is an childbox in a bigger parent box called "middle", when I hover the "left" div the picture should be visible over the entire "middle" which is the parent.

I have tried different solutions bust most of them is for a <span> or an <a> tag.

I can explain better if necessary and I don't need to show css, I'm only looking for a solution on how to do it, I'm familiar with JS.

to summarize I want a picture to be invisible until hovering over the box/div called "left" I don't want the picture to show only when hovering the text, and when hovering the "left" the picture should be shown and displayed, the rest I can figure out myself.

Upvotes: 0

Views: 952

Answers (2)

Berk Kurkcuoglu
Berk Kurkcuoglu

Reputation: 1523

You can utilize css :hover for this. Pure css solution:

#img1 {
 display: none;
}

#left:hover #img1 {
 display: block;
}

Upvotes: 1

Stephen Zahra
Stephen Zahra

Reputation: 29

<!DOCTYPE html>
<html>
    <div id="left">
       <p class="h1">EXPERIENCES</p>

       <p class="describe">Websites, Ecommerce, Mobile Apps & <br />Installations</p>

       <img id="img1"src="ski.jpg" alt="ski">
    </div>

<script>
    document.getElementById("left").onmouseover = function() {showImage()};
    document.getElementById("left").onmouseout = function() {hideImage()};

    function showImage() {
      document.getElementById("img1").setAttribute("style", "visibility: hidden");
    }

    function hideImage() {
      document.getElementById("img1").setAttribute("style", "visibility: visible");
    }
</script>

</html>

This code should work, also I fixed your spelling mistake regarding the word "experiences". Enjoy bud :)

Upvotes: 0

Related Questions