jQuery-悬停时更改图像src

基本上，我想将图像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>

---

这可以在不使用javascript的情况下完成，而只使用css。 像这样：

为图标提供不同的类别，如facebook的fb、tw或twitter等

HTML:

---

您可以使用sprite来提高效率。

如果不需要与旧浏览器兼容，您可以在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");
    });
});

---

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

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

---

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

$（“文档”）.ready（函数（）{
$（“.hover change img img”）.mouseenter（函数（）{
$（this.attr（'src'，'sample2.png'）；
});     
$（“.hover change img img”）.mouseleave（函数（）{
$（this.attr（'src'，'sample1.png'）；
}); 
});

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

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

---

您可以向图像添加一个额外属性，如“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>

var src=“”；
var alt=“”；
$（“文档”）.ready（函数（）{
$（“.img流体”）.mouseenter（函数（）{
var src=$（this.attr（'src'）；
var alt=$（this.attr（'alt_img'）；
$（this.attr（'src'，alt）；
$（this.attr（'alt_img'，src）；
});     
$（“.img流体”）.mouseleave（函数（）{
var src=$（this.attr（'src'）；
var alt=$（this.attr（'alt_img'）；
$（this.attr（'src'，alt）；
$（this.attr（'alt_img'，src）；
}); 
});

为什么不试试CSS图像精灵？为什么在html代码中添加了两个类？只使用一个css，如果您想添加两个或更多个css，您可以添加为class=“img social left”^谢谢，这是一个错误（不知道如何），我将在许多其他悬停状态中使用-active，这样做是否仍然是最佳做法？别担心，有时我忘记了简单的事情，结果在不需要的时候使用了太多的jQuery-1作为问题标题和示例指定要使用的jQuery。哪些较旧的浏览器不能执行

：hover

？IE多达6个浏览器只支持在具有“href”属性的元素上悬停：Noted。但是OP使用的是

a href

，而且IE6已经13岁了！在这个问题中，悬停样式不能应用于标记，而是应用于标记，因此它没有使用具有“href”属性的元素。关于IE6的时代，我知道，但我仍然看到一些客户要求与它兼容。我并没有这样解释OP的问题——我假设更改img src on hover的需要是在包装它的链接的hover上，但OP的请求是在img的hover上，这是非常正确的（尽管OP没有声明行为“不得”应用于

a

，正如您所建议的）。最后，我站在更正和感谢您的反馈。添加一些描述，这将比只是一段代码更有帮助。

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

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

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

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