Make a different image appear when hovering over a div

Question

I've tried many methods on how to resolve this issue, but I can't seem to find a solution, so it's time to ask help from more experienced people. Basically what I want is for an image to change when I hover over its 'div' (the box) that the img is in. Have a look at the code:

<!DOCTYPE html>
<html>
    <head>
        <style>

            body {
            background: grey;
            }

            #box {
                margin: 0 auto;
                width:  300px;
                height: 300px;
                background: blue
            }
            #box img {
                display: block;
                margin: 0 auto;
                padding-top: 75px;
            }
        </style>
        <meta charset="utf-8">
    </head>
    <body>
        <a href="#">
            <div id="box">
                <img src="registration_icon_white.png" onmouseover="src='registration_icon_black.png'" onmouseout="'registration_icon_black.png'">
            </div>
        </a>
    </body>

(the images are the same, just with different colors)

Any help would be appreciated, thanks.

can you use javascript or better yet jquery? – rjustin Sep 21 '17 at 23:47 — rjustin, Sep 21 '17 at 23:47

score 0 · Answer 1 · answered Sep 21 '17 at 23:57

0

You're not specifying what src to are assigning the URL too. You would need to use this.src='URL' in the onmouseover and onmouseout events.

Here is a link about the this keyword: How does the "this" keyword work?

answered Sep 21 '17 at 23:57

Christopher

36
1
3

To have it change when hovering over the div "box" move the onmouseover and onmouseout events to the div and have the code they run target the img tag. `

` – Christopher Sep 22 '17 at 00:37

score 0 · Answer 2 · answered Sep 22 '17 at 00:03

0

Try with this.src:

    <div id="box">              
      <img title="some title" src="registration_icon_white.png" 
           onmouseover="this.src='registration_icon_black.png'"
           onmouseout="this.src='registration_icon_white.png'">
    </div>

answered Sep 22 '17 at 00:03

Alejandro Montilla

2,626
3
31
35

That's a step into the right direction, thanks. Do you also by any chance know how I can trigger this by hovering over the box instead of the image itself? – Michael Sep 22 '17 at 00:18
You will need javascript (or JQuery) to do that. – Alejandro Montilla Sep 22 '17 at 00:26

score 0 · Accepted Answer · answered Sep 22 '17 at 02:32

0

You can just put the image in the background of the div.

DEMO

<div id="box"></div>

Make a different image appear when hovering over a div

3 Answers3