图片元素不适用于 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>

图片元素不适用于 onmouseover 和 onmouseout

Picture element doesn't work with onmouseover & onmouseout

html

javascript

image

mouseover

mouseout