jQuery - 在悬停时更改图像 src

jQuery - Change image src on hover

提问by nsilva

Basically I want to change the image src to add -active.pngon hover.

基本上我想更改图像 src 以添加-active.png悬停。

So fb.png would become fb-active.png on hover, and fb.png when it's not hovering.

所以 fb.png 在悬停时会变成 fb-active.png，当它不悬停时会变成 fb.png。

I'm not too sure what I am doing wrong so I'll post my code so far:-

我不太确定我做错了什么，所以到目前为止我会发布我的代码：-

HTML

HTML

        <div id="main-contact" class="right">

            <div id="main-social">

                <a href="#!"><img class="img-social" alt="Company - Facebook" class="left" src="images/fb.png" /></a>

                <a href="#!"><img class="img-social" alt="Company - Twitter" class="left" src="images/twitter.png" /></a>

                <a href="#!"><img class="img-social" alt="Company - LinkedIn" class="left" src="images/linkedin.png" /></a>

                <a href="#!"><img class="img-social" alt="Company - Word Press" class="left" src="images/wordpress.png" /></a>               

            </div>

        </div>

jQUERY

查询

$(document).ready(function() {

$(function(){
    var regexactive = /-active\..*$/;

    var ct = $('#main-social');
    var imgs = $('.img-social img', ct);

    function activateImage(imgs){
        imgs.each(function(){
            var img = $(this);
            var src = img.attr('src');
            if( !regexactive.test(src) ){
                img.attr('src', src.replace('.png', '-active.png'))
            }
        });
    }

    ct.on('hover', '.img-social', function(){


        var img = $('.img-social img');
        activateImage(img);
    });
});

});

采纳答案by Hiral

This can be done without javascript, with only css. Like this:

这可以在没有 javascript 的情况下完成，只有 css。像这样：

Give different classes for icons like fbfor facebook,twor twitter and so on.

fb为 facebooktw或 twitter 等图标提供不同的类。

HTML:

HTML：

<div id="main-social">    
    <a href="#!"><span class="img-social fb left" title="Company - Facebook"></span></a>
    <a href="#!"><span class="img-social tw left" title="Company - Twitter"></span></a>
    <a href="#!"><span class="img-social ln left" title="Company - LinkedIn"></span></a> 
    <a href="#!"><span class="img-social wp left" title="Company - Word Press"></span></a> 
</div>

CSS:

CSS：

.img-social{display:inline-block;height:20px;width:20px;}
.fb{background:url("images/fb.png");}
.fb:hover{background:url("images/fb-active.png");}
.tw{background:url("images/twitter.png");}
.tw:hover{background:url("images/twitter-active.png");}
.ln{background:url("images/linkedin.png");}
.ln:hover{background:url("images/linkedin-active.png");}
.wp{background:url("images/wordpress.png");}
.wp:hover{background:url("images/wordpress-active.png");}

You can use sprite for efficiency.

您可以使用精灵来提高效率。

回答by Simon

You could do this just in CSS if you don't need to be compliant with older browsers.

如果您不需要与旧浏览器兼容，您可以仅在 CSS 中执行此操作。

To do it in jquery, you can try something like this:

要在 jquery 中做到这一点，你可以尝试这样的事情：

$(".img-social").hover(function(){
    $(this).attr("src", function(index, attr){
        return attr.replace(".png", "-active.png");
    });
}, function(){
    $(this).attr("src", function(index, attr){
        return attr.replace("-active.png", ".png");
    });
});

回答by Gnanasekar S

You can use mouseenter, mouseleave functions.

您可以使用 mouseenter、mouseleave 函数。

<a href="#" class="hover-change-img"><img src="sample1.png" class="img-responsive"></a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>

    $("document").ready(function(){ 
        $(".hover-change-img img").mouseenter(function(){       
            $(this).attr('src','sample2.png');      
        });     
        $(".hover-change-img img").mouseleave(function(){       
            $(this).attr('src','sample1.png');      
        }); 
    });

</script>

回答by Darwin Buelo

I use this script.. base on the script above... it just switch between the active and original image.

我使用这个脚本......基于上面的脚本......它只是在活动图像和原始图像之间切换。

$("document").ready(function(){ 
        $(".my_image").mouseenter(function(){       
            $(this).attr('src',function(index, attr){
        return attr.replace(".png", "-active.png");
    });      
        });     
        $(".my_image").mouseleave(function(){       
            $(this).attr('src',function(index, attr){
        return attr.replace("-active.png",".png");});      
        }); 
    });

回答by Moob

There's load of ways of doing this. One of the simplest is to have the two states in the same image and then just changing the background position on hover. This way there's no extra wait for the hover image to load as its already there.

有很多方法可以做到这一点。最简单的方法之一是将两个状态放在同一图像中，然后在悬停时更改背景位置。这样就无需额外等待悬停图像加载，因为它已经存在。

<div id="main-social">
    <a href="#!" alt="Company - Facebook" class="left fb">facebook</a>
    <a href="#!" alt="Company - Twitter" class="left tw">twitter</a>
    <a href="#!" alt="Company - LinkedIn" class="left li">linkedin</a>
    <a href="#!" alt="Company - Word Press" class="left wp">Wordpress</a>               
</div>

CSS

CSS

#main-social a {
    width:  50px;
    height: 50px;
    display: inline-block;
    text-indent:-1000px;
    overflow:hidden;
    background-position: left top;
}
#main-social a.fb {
    background-image: url('fb.png');
}
#main-social a.tw {
    background-image: url('tw.png');
}
#main-social a.li {
    background-image: url('li.png');
}
#main-social a.wp {
    background-image: url('wp.png');
}
#main-social a:hover, #main-social a.active {
    background-position: left bottom!important;
}

Demo JSFiddle

演示 JSFiddle