Changing Link Image On Hover

my question today probably has an easy answer, however I have found a few working examples but can't seem to transfer it to my web page. I am trying to use an image for a link, and

Solution 1:

Please take a look at https://jsfiddle.net/avzfdc2j/3/

It has been done using css with background image and transition

div.smile {
    background-image:url("http://images.clipartpanda.com/stupidity-clipart-1320682287266972230curius_face.svg.hi.png");background-size:60px60px;height:60px;width:60px;cursor:pointer;
}

div.smile:hover {
    background-image:url("http://images.clipartpanda.com/straight-face-clipart-black-and-white-smiley-face-hi.png");transition:ease0.5s;
}

<ahref="http://google.com/"><divclass="smile"></div></a>

Solution 2:

You should be changing the src attribute instead:

functionhoverImg(x) {
    x.src = "image/arrowBtnHover.png"
    x.style.transition = "ease 0.5s"
}

functionnormalImg(x) {
    x.src = "image/arrowBtn.png"
}

But I don't think that the transition will work with this.

Solution 3:

Since it's an image, you need to change it's src property, not it's CSS.

functionhoverImg(x) {
    x.src = "image/arrowBtnHover.png"
    x.style.transition = "ease 0.5s"
}

functionnormalImg(x) {
    x.src = "image/arrowBtn.png"
}