jquery 将鼠标悬停在图像上以交换上面 div 中的另一个图像

Posted 2023-05-08

【中文标题】jquery 将鼠标悬停在图像上以交换上面 div 中的另一个图像

【英文标题】：jquery mouseover an image to swap another image in the div above

【发布时间】：2012-12-25 17:09:06

【问题描述】：

我想将"-h.png"添加到< div id="swap" >中所有img src的末尾，同时将鼠标悬停/悬停在< img src="images/logo.png" />上并返回".png" mouseout

这是我所拥有的，但它不起作用：

<div id="header-wrap">
    <div id="swap">
        <img src="images/4.png"/>
        <img src="images/3.png"/>
        <img src="images/2.png"/>
        <img src="images/1.png"/>
    </div>
    <header id="header">
        <div id="site-logo"><a href="#"><img src="images/logo.png" /></a></div>
    </header>
</div><!-- /#header-wrap --> 

$(document).ready(function()      
    $('#site-logo').hover(function()     
        $('#swap img').replace('.png','-h.png');    
    ,     
    function()    
        $('#swap img').replace('-h.png','.png');     
    );
);

刚刚更新到下面...图像现在正在交换，但所有 4 个图像都交换为 /4-h.png 而不是 4-h.png、3-h.png、2-h.png 和 1-h .png

$(document).ready(function() 
    var newSrc = "";
    $('#site-logo').hover(function()
        newSrc = $('#swap img').attr('src').replace('.png','-h.png');   
        $('#swap img').attr('src', newSrc);
    ,     
    function()
        newSrc = $('#swap img').attr('src').replace('-h.png','.png');     
        $('#swap img').attr('src', newSrc);
    );
); 

【参考方案1】：

试试这个：

    /* so it's not working
    $(document).ready(function()      
        $('#site-logo').hover(function()     
            $('#swap img').attr('src').replace('.png','-h.png');    
        ,     
        function()    
            $('#swap img').attr('src').replace('-h.png','.png');     
        );
    );
    */

---

好的，所以我发现 .replace 方法是纯 javascript 试试这个：

$(document).ready(function() 
    var newSrc = "";
    $('#site-logo').hover(function()
        $('#swap img').each(function() 
           newSrc = $(this).attr('src').replace('.png','-h.png');   
           $(this).attr('src', newSrc);
        );
    ,     
    function()
        $('#swap img').each(function() 
           newSrc = $(this).attr('src').replace('-h.png','.png');     
           $(this).attr('src', newSrc);
        );
    );
); 

【讨论】：

这有点工作，图像正在交换，但所有 4 个图像都交换为 4-h.png 而不是 4-h.png、3-h.png、2-h.png 和1-h.png

我没有意识到你有 4 张图片..所以我用每个循环编辑它。现在应该可以工作了

【参考方案2】：

你可以试试这个，只要这样使用.slice()就可以实现你的目标：

$('#site-logo').hover(function () 
   var atr = $('#swap img').attr('src').slice(0, -4);
   var newAtr = atr+'-h.png'
   $('#swap img').attr('src', newAtr);
,function () 
   var atr = $('#swap img').attr('src').slice(0, -6);
   var newAtr = atr+'.png'
   $('#swap img').attr('src', newAtr);
);

检查小提琴：http://jsfiddle.net/6vqJV/

【参考方案3】：

试试这个代码

$(document).ready(function()      
    $('#site-logo').hover(function()     
        $('#swap img').attr('src','-h.png');    
    ,     
    function()    
        $('#swap img').attr('src','.png');     
    );
);

或

$(document).ready(function()      
        $('#site-logo').hover(function()     
            $('#swap img').each(function()
$(this).attr('src','-h.png');
             );    
        ,     
        function()    
            $('#swap img').each(function()
$(this).attr('src','.png');
);
        );
    );

【参考方案4】：

$("#site-logo").hover(function () 

  $("#swap img").each(function () 
    var test = $(this).attr('src');
    $("#helper").append("<span>" + test.replace('.png', '-h.png') + "</span><br />");
  );

,

function () 
  $("#swap img").each(function () 
    var test = $(this).attr('src');
    $("#helper2").append("<span>" + test.replace('-h.png', '.png') + "</span><br />");
  );

);

Test Link