图片元素不适用于onmouseover和onmouseout

时间:2018-11-01 18:44:48

标签: javascript html image mouseover mouseout

任何人都在考虑如何使picture元素与onmouseoveronmouseout一起使用?

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

1 个答案:

答案 0 :(得分: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>