Javascript 具有悬停效果的响应图像

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

<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

来实现这一点，但这样做可以消除桌面查看器的鼠标悬停效果。有什么办法可以让这两个人一起工作吗

---

谢谢。

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

基本上，我可以告诉你，你需要添加两个具有不同悬停效果的图像-一个用于桌面，一个用于移动

---

并根据css的屏幕分辨率隐藏其中一个。

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

基本上，我可以告诉你，你需要添加两个具有不同悬停效果的图像-一个用于桌面，一个用于移动

---

并根据css的屏幕分辨率隐藏其中一个。

您可能需要通过HTML文档底部的

标记添加一些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>

//检测浏览器是否启用触摸事件
document.documentElement中的var isTouchDevice=“ontouchstart”；
//选择您的图像
var image1=document.getElementById（“image-1”）；
如果（isTouchDevice）{//如果是触摸，请更改图像src
image1.src=“jb-400x500-2.jpg”；
}否则{//如果它不是touch，则分配mouseover和mouseout事件
图1.addEventListener（“鼠标悬停”，函数（事件）{
image1.src=“jb-400x500-2.jpg”；
});
图1.addEventListener（“鼠标出”，函数（事件）{
image1.src=“jb-400x500.jpg”；
});
}

---

请记住在文档底部添加

，在关闭

之前，您可能需要通过HTML文档底部的

标记添加一些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>

//检测浏览器是否启用触摸事件
document.documentElement中的var isTouchDevice=“ontouchstart”；
//选择您的图像
var image1=document.getElementById（“image-1”）；
如果（isTouchDevice）{//如果是触摸，请更改图像src
image1.src=“jb-400x500-2.jpg”；
}否则{//如果它不是touch，则分配mouseover和mouseout事件
图1.addEventListener（“鼠标悬停”，函数（事件）{
image1.src=“jb-400x500-2.jpg”；
});
图1.addEventListener（“鼠标出”，函数（事件）{
image1.src=“jb-400x500.jpg”；
});
}

---

请记住在关闭

之前将

添加到文档底部。如果在支持

的浏览器上包含
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');" />

如果在支持它的浏览器上包含
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');" />


但你怎么能在手机上悬停呢？@PaulFitzgerald我想他的意思是，他希望手机上的第二张图像默认显示。此外，在iDevices上，你可以点击鼠标悬停，但你怎么能在手机上悬停呢？@PaulFitzgerald我想他的意思是他希望手机上的第二张图像默认为第二张图像。此外，在iDevices上，您可以点击鼠标悬停您的解决方案和Marco Del Valle的解决方案，这两种解决方案都非常有效。谢谢你的快速回复！你的解决方案和马尔科·德尔瓦勒的解决方案都非常有效。谢谢你的快速回复！