'Trying to change source of image onHover with jquery

I am trying to change the image of an arrow to a darker version using jquery. I believe the code is right, it's just not executing on the page. The file does load.

HTML

            <article>
                <a href="about" id="learnLin"><h2 class="head4"> Learn more<span class="float-right"> <img id="image" src="right-arrow.png"> </span></h2> </a>
            </article>

Jquery

$( "#learnLin" ).mouseover(
      function() {
        $("#image").attr("src", "right-arrow-dark.png");
      })


Solution 1:[1]

Try this one

Considering the path of image is correct

    <img id="image" src=""this.src='right-arrow.png'" 
onmouseover=""this.src='right-arrow-dark.png''" onmouseout="this.src='right-arrow.png'"/>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Zahid Mustafa