Question

我有一个图片元素：

<picture>
    <source media="(max-width: 767px)" 
     srcset="images/home-page/mobile/mobile_no_hover.jpg?$staticlink$, 
     images/home-page/mobile/mobile_no_hover@2x.jpg?$staticlink$ 2x" 
    />

    <source media="(min-width: 480px) and (max-width: 767px)" 
     srcset="images/home-page/smart-phone/smart_phone_no_hover.jpg?$staticlink$, 
     images/home-page/smartphone/smart_phone_no_hover@2x.jpg?$staticlink$ 2x" 
    />

    <source media="(min-width: 768px) and (max-width: 1023px)" 
     srcset="images/home-page/tablet/tablet_no_hover.jpg?$staticlink$, 
     images/home-page/tablet/tablet_no_hover@2x.jpg?$staticlink$ 2x" 
    />

   <img src="images/home-page/desktop/OUI_D_HPM_0000.jpg?$staticlink$" 
    srcset="images/home-page/desktop/images/home-page/desktop/desktop_no_hover.jpg?$staticlink$,
    images/home-page/desktop/desktop_no_hover@2x.jpg?$staticlink$ 2x" 
   />
</picture>

我想做的是使用JS，如果我必须使用jQuery做类似的事情：

$(function(){
  $("picture").on({
   mouseenter: function(){
    $(this).attr('src','images/home-page/desktop/desktop_hover.jpg');
  },
  mouseleave: function(){
    $(this).attr('src','images/home-page/desktop/desktop_no_hover.jpg');
  }
  });
});

但是您可以看到，这仅适用于台式机， AND 非视网膜或2x。

那我如何为2个 AND 所有不同的断点创建一个漂亮的模块化悬停？

谢谢！

JavaScript和图片元素为不同的断点创建悬停

0 个答案: