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

FIDDLE

Answer 2

快速解决方案，也许不是最美丽的解决方案，但它确实有效。

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 3

试试这个：

function showImage() {
    //Your code here
}

function hideImage() {
    //Your code here
}

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

Answer 4

你有什么特别的理由不想使用jQuery吗？

在css中：

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

in 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解决方案？

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

Answer 5

如果您正在使用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();
});

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

在onmouseover事件中显示多个图像

5 个答案: