12

基本上我想更改图像 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>

查询

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

});
4

6 回答 6

21

如果您不需要与旧浏览器兼容，您可以只在 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");
    });
});
于 2013-11-03T12:46:56.187 回答
6

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

fb为 facebooktw或 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");}

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

于 2013-11-03T12:40:17.093 回答
6

您可以使用 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>
于 2016-09-21T15:58:34.333 回答
2

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

$("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");});      
        }); 
    });
于 2017-12-13T02:32:26.343 回答
1

您可以为图像添加额外的属性，例如“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>
于 2020-06-23T19:08:18.207 回答
0

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

<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

于 2013-11-03T12:53:23.160 回答