具有悬停效果的响应图像

Question

我目前有一个具有悬停效果的图像，如下所示：

<img src="jb-400x500.jpg" alt="yada" width="400" height="500" onmouseover="this.src='jb-400x500-2.jpg';" onmouseout="this.src='jb-400x500.jpg';" />

效果很好，除了我只希望为移动查看器显示第二个图像（jb-400x500-2.jpg）。 我尝试使用srcset实现此目的，但是这样做摆脱了桌面查看器的鼠标悬停效果。 有什么办法可以使两者一起工作吗？

谢谢。

Answer 1

如果在支持它的浏览器中包含srcset ，则src属性将被忽略。 因此，您的脚本将需要更改srcset以及src属性，或代替src属性。 例如

<img src="jb-400x500.jpg" alt="yada" width="400" height="500"
  srcset="jb-400x500-2.jpg 720w,jb-400x500.jpg 1x"
  onmouseover="this.setAttribute('srcset','jb-400x500-2.jpg 720w,jb-400x500-2.jpg 1x');"
  onmouseout="this.setAttribute('srcset','jb-400x500-2.jpg 720w,jb-400x500.jpg 1x');" />

Answer 2

您可能需要通过HTML文档底部的<script>标记添加一些JavaScript。

首先，您必须在图片中添加id属性，以便我们选择它。

<img src="jb-400x500.jpg" id="image-1" alt="yada" width="400" height="500" />

其次，我们将使用Javascript来检测您是否正在使用触摸设备，并将必要的行为应用于图像元素：

<script>
    // Detect if browser enables touch events
    var isTouchDevice = "ontouchstart" in document.documentElement;
    // Select your image
    var image1 = document.getElementById("image-1");

    if(isTouchDevice){ // If it's touch, change the image src
        image1.src = "jb-400x500-2.jpg";
    }else{ // If it's not touch, assign mouseover and mouseout events
        image1.addEventListener("mouseover", function( event ) {
            image1.src = "jb-400x500-2.jpg";
        });
        image1.addEventListener("mouseout", function( event ) {
            image1.src = "jb-400x500.jpg";
        });
    }
</script>

请记住，在关闭</body>之前，将<script>添加到文档底部。

Answer 3

您需要使用CSS和@ media-query来实现此效果

基本上，我可以说您需要添加两张具有不同悬停效果的图像-一幅用于桌面，一幅用于移动，并根据css的屏幕分辨率隐藏其中一幅。