Picture element doesn't work with onmouseover & onmouseout

Question

Anyone have thoughts on how to get the picture element to work with onmouseover and onmouseout?

<picture>
  <a href="#">
    <img id="color-palette" class="u-max-full-width make-up-img" 
      src="images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_1.jpg?$staticlink$" 
      srcset="images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_1_@2x.jpg?$staticlink$" 
      onmouseover="this.src='images/home-page/desktop/EYES_ON_YOU_desktop_HP_HOVER_3.jpg?$staticlink$'" 
      onmouseout="this.src='images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_1.jpg?$staticlink$'" 
     />
  </a>
</picture>

Answer 1

Try this, my friend. Hope to help :))

<picture>
  <a href="#">
    <img src="URL OF FIRST IMAGE GOES HERE"
         onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
         onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
    </img>
  </a>
<picture>

//And this is a sample
<picture>
  <a href="#">
    <img src="http://nineplanets.org/planets.jpg" 
     onmouseover="this.src='http://nineplanets.org/planetorder.JPG';"
     onmouseout="this.src='http://nineplanets.org/planets.jpg';">
    </img>
  </a>
<picture>