JavaScript и элемент изображения для создания наведения на разные точки останова - PullRequest
Новая
       15

JavaScript и элемент изображения для создания наведения на разные точки останова

0 голосов
/ 02 ноября 2018

У меня есть элемент изображения: 

<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 non retina или 2x.

Итак, как бы мне создать довольно модульное наведение для 2x И всех различных точек останова?

Заранее спасибо!

...