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属性，或代替<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');" />属性。 E.g。

user.id

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>

请务必在关闭<script>之前在文档底部添加</body>。

Answer 3

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

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

响应式图像与悬停效果

3 个答案: