javascript - 在鼠标悬停事件中显示多个图像

Question

我有以下代码显示图像 onmouseover 并设置默认图像活动 onmouseout。

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

我希望能够显示多个图像onmouseover事件；每次显示在设定的时间后。谁能帮我解决这个问题？

Answer 1

HTML

<div id="container">
   <img id="initialIMG" src="http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png" />
</div>

<img src="http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png" onmouseover="this.src='http://icons.iconarchive.com/icons/jamespeng/construction/128/longhaul-icon.png'" onmouseout="this.src='http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png'" />

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);
    });
});

小提琴

Answer 2

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

<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>

使用 jQuery：

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

这只会隐藏/显示与主图像相关的次要图像元素，
告诉我这是否不是您想要的行为。

Answer 3

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

HTML：

<img id="image1" src="image1.jpg" onmouseover="showImages()" onmouseout="hideImages()" />
<img id="image2" src="image2.jpg" style="display:none;" />
<img id="image3" src="image3.jpg" style="display:none;" />

Javascript：

function showImages(){
  document.getElementById('image2').style = '';
  document.getElementById('image3').style = '';
}
function hideImages(){
  document.getElementById('image2').style = 'display: none;';
  document.getElementById('image3').style = 'display: none;';
}

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

Answer 4

尝试这个：

function showImage() {
    //Your code here
}

function hideImage() {
    //Your code here
}

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

Answer 5

有什么你不想使用 jQuery 的具体原因吗？

在 CSS 中：

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

在 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>

在js中：

$("#my-pics").mouseenter(function(){
    $(this).find(".default").hide();
    $(this).find(":not(.default)").show();
}).mouseleave(function(){
    $(this).find(".default").show();
    $(this).find(":not(.default)").hide();
});

当然你需要先导入jquery。自己没有测试过，有什么错误吗？

CSS解决方案？

在 html 中：

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

在 CSS 中：

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