Javascript 在onmouseover事件中显示多个图像

我有下面的代码，它在mouseover上显示一个图像，并在mouseout上设置默认的活动图像

<img src="image1.jpg" onmouseover="this.src='image2.jp'" onmouseout="this.src='image1.jpg'" />

---

我希望能够在MouseOver事件中显示多个图像；每一个都在设定的时间后显示。有人能帮我解决这个问题吗？

这是一个快速的解决方案，也许不是最漂亮的，但它很有效

HTML:

当然，您应该使用类来解决这个问题，以清理代码。这只是一个有效的基本示例。

尝试以下方法：

function showImage() {
    //Your code here
}

function hideImage() {
    //Your code here
}

<img src="image1.jpg" onmouseover="showImage();" onmouseout="hideImage();" />

函数showImage（）{
//你的代码在这里
}
函数hideImage（）{
//你的代码在这里
}

HTML

JavaScript

$(document).ready(function(){
    $("#container").mouseenter(function() {  
        var t = setTimeout(function(){ 
           $("#initialIMG").hide();

           $("#initialIMG").attr("src", "http://icons.iconarchive.com/icons/jamespeng/construction/128/longhaul-icon.png" )
           $("#initialIMG").fadeIn(50);
           $("#container").append( '<img id="addedIMG" src="http://icons.iconarchive.com/icons/jamespeng/construction/128/mixmaster-icon.png" style="display:none;"/>' );      
           $("#addedIMG").fadeIn(50);  
        },500);
    });
    $("#container").mouseleave(function() {
          var t = setTimeout(function(){ 
              $("#initialIMG").hide();                      
              $("#initialIMG").attr("src", "http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png" )
              $("#initialIMG").fadeIn(50);   
              $("#addedIMG").remove();
              },500);
    });
});

$（文档）.ready（函数（）{
$（“#容器”）.mouseenter（函数（）{
var t=setTimeout（函数（）{
$（“#initialIMG”）.hide（）；
$（“#initialIMG”）.attr（“src”http://icons.iconarchive.com/icons/jamespeng/construction/128/longhaul-icon.png" )
$（“初始值”）.fadeIn（50）；
$（“#容器”）。附加（“”）；
$（“#addedIMG”）。法代因（50）；
},500);
});
$（“#容器”）.mouseleave（函数（）{
var t=setTimeout（函数（）{
$（“#initialIMG”）.hide（）；
$（“#initialIMG”）.attr（“src”http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png" )
$（“初始值”）.fadeIn（50）；
$（“#addedIMG”）.remove（）；
},500);
});
});

---

您不想使用jQuery有什么具体原因吗

在css中：

#my-pics .default{
    display: inline;
}

#my-pics img{
    display: none;
}
#my-pics img.default{
    display: inline;
}
#my-pics:hover img{
    display: inline;
}
#my-pics:hover img.default{
    display: none;
}

在html中：

<div id="my-pics">
    <img src="image1.jpg" class="default" />
    <img src="image2.jpg" style="display:none;" />
    <img src="image3.jpg" style="display:none;" />
</div>

<div id="my-pics">
    <img src="image1.jpg" class="default" />
    <img src="image2.jpg"/>
    <img src="image3.jpg"/>
</div>

当然，首先需要导入jquery。我自己没有测试过，有错误吗

CSS解决方案？

在html中：

<div id="my-pics">
    <img src="image1.jpg" class="default" />
    <img src="image2.jpg" style="display:none;" />
    <img src="image3.jpg" style="display:none;" />
</div>

<div id="my-pics">
    <img src="image1.jpg" class="default" />
    <img src="image2.jpg"/>
    <img src="image3.jpg"/>
</div>

---

如果您使用的是jQuery，那么当您的文档准备就绪时：

<img class="main-image" data-target=".images-set1" src="mainImage1.jpg">

这将仅隐藏/显示与主映像相关的次映像元素，

---

如果这不是您想要的行为，请告诉我。

如果只有一个鼠标，并且只有一个图像可以鼠标悬停，您将如何在鼠标悬停时显示多个图像？如果一个图像悬停，您想禁用所有图像还是只禁用一个悬停的图像查看JavaScript事件处理，与内联

onmouse~

属性不同。就像几秒钟后显示一组图像一样@tikider列出产品（如衣服）并将鼠标悬停在任何位置，它显示侧面和背面视图或更多图像。@OmniPotens，所以当你在主图像上悬停时，必须显示一组次图像？这只是在MouseOver上显示一个图像，但我想在MouseOver上悬停一组图像，比如最多3或4个图像。这对每个图像都有设置超时吗？请在我的问题中忽略这个。你可以用javascript setTimeout（）函数添加一个超时。请你用它更新你的解决方案，因为我知道我需要“setTimeout”，但不知道如何集成它。谢谢，但我不想要它。就像正常的onmouseover和另一个图像淡入，同样的方式是我希望它也能正常工作。有线索吗？很酷的一条@Alex Art。我如何让它准确地工作？当鼠标悬停在onmouseover事件上时，它是如何显示图像的？显示器的速度也很快，不再需要设置超时来控制它。我肯定不能让它工作。少了什么？我肯定包含了jQuery1.9来启动JS。这段代码只是展示了一个解决方案，您需要调整它，而不仅仅是复制/超越它。或者，您可以包含自己的代码和更多详细信息，以便我们可以帮助您。您应该尝试调试它。例如，将一些console.log放在事件处理程序中，查看它们是否被触发。我会尝试一下，看看我能从中得到什么。谢谢你的引导

#my-pics img{
    display: none;
}
#my-pics img.default{
    display: inline;
}
#my-pics:hover img{
    display: inline;
}
#my-pics:hover img.default{
    display: none;
}

<img class="main-image" data-target=".images-set1" src="mainImage1.jpg">

<div class="images-set1">
    <img src="secondary1-1.jpg" style="display:none">
    <img src="secondary1-2.jpg" style="display:none">
    <img src="secondary1-2.jpg" style="display:none">
    ....
</div>

$('main-image').on('mouseover', function (event) {
    $($(event.target).attr('data-target') + ' img').show();
})
.on('mouseout', function (event) {
    $($(event.target).attr('data-target') + ' img').hide();
});