jQuery - 鼠标悬停改变图片src

Question

基本上，我想要在鼠标悬停时更改图像的src属性，以添加-active.png。

因此，当鼠标悬停时，fb.png将变为fb-active.png，当它没有悬停时则为fb.png。

我不太确定我做错了什么，所以我会贴出我目前的代码：

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

});

- nsilva

---

为什么不尝试使用CSS图像精灵呢？ - Terry

为什么你在HTML代码中添加了两个类？如果你想要添加两个或更多的CSS，只需使用一个类，例如class="img-social left"。 - Krish R

谢谢，是我的错误（不知怎么搞的）。 - nsilva

Answer 1

如果您不需要与旧浏览器兼容，您可以仅使用CSS完成此操作。

要在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");
    });
});

- Simon

---

哪些旧版浏览器不支持 :hover？ - Moob

IE 6及以下版本仅支持带有“href”属性的元素悬停：http://reference.sitepoint.com/css/pseudoclass-hover - Simon

已注意。但是 OP 确实 正在使用 a href，而且IE6已经13年了！ - Moob

在这个问题中，悬停样式不能应用于<a>标签，而是应该应用于<img>标签，因此它不使用具有“href”属性的元素。关于IE6的年龄，我知道，但仍然看到一些客户要求与之兼容:/ - Simon

说得好。我没有完全理解OP的问题 - 我假设需要在链接悬停时更改img src，但您是完全正确的，OP的要求是在img悬停时（尽管OP没有声明行为“不得”应用于您建议的a）。最终，我被纠正了，感谢您的反馈。 - Moob

Answer 2

你可以使用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>

- Gnanasekar S

Answer 3

这可以在没有JavaScript的情况下只使用CSS完成。 像这样：

为不同的图标分配不同的类，如fb表示Facebook，tw表示Twitter等。

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：

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

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

- codingrose

---

我原本打算在许多其他悬停状态中使用-active，但仍然最好按照这种方式做吗？ - nsilva

不用担心，有时候我也会忘记简单的事情，结果就过度使用 jQuery ，即使没有必要。 - nsilva

题目和示例指定要使用jQuery。 （意为：本题目和示例中明确指定要使用jQuery库） - verbumSapienti

Answer 4

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

$("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");});      
        }); 
    });

- Darwin Buelo

---

添加一些描述会比仅仅代码片段更有帮助。 - Mathews Sunny

Answer 5

你可以给图片添加额外的属性，比如 "alt_img"，然后等待悬停事件并切换属性。这是一种非常简单的方法。

<script type="text/javascript">
    var src = "";
    var alt = "";
    $("document").ready(function(){ 
        $(".img-fluid").mouseenter(function(){       
            var src = $(this).attr('src');
            var alt = $(this).attr('alt_img');
            $(this).attr('src',alt);      
            $(this).attr('alt_img',src);      
        });     

        $(".img-fluid").mouseleave(function(){       
            var src = $(this).attr('src');
            var alt = $(this).attr('alt_img');
            $(this).attr('src',alt);      
            $(this).attr('alt_img',src);     
        }); 
    });
</script>

- Bruno Sacco

Answer 6

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

<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

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

演示 JSFiddle

- Moob