图片元素不适用于onmouseover & onmouseout

Question

任何人都对如何让picture元素使用onmouseover和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

试试这个我的朋友。希望能有所帮助：)

<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>