в jQuery - смена картинки при наведении

Question

в jQuery - смена картинки при наведении

В основном я хочу изменить изображение src, чтобы добавить -active.png при наведении.

Итак, fb.png станет FB-активным.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);

    });

});



});

750 5

jQuery

5 ответов:

Comments

Ничего не найдено.

Hiral · Accepted Answer · 2014-09-11 15:09:06

Это можно сделать без 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");}

Вы можете использовать спрайт для повышения эффективности.

Simon · Accepted Answer · 2013-11-03 14:46:56

Вы можете сделать это только в 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");
    });
});

Gnanasekar S · Accepted Answer · 2016-09-21 19:05:27

Вы можете использовать функции 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>

Darwin Buelo · Accepted Answer · 2017-12-13 04:32:26

Я использую этот скрипт.. исходя из вышеизложенного сценария... он просто переключается между активным и исходным изображением.
$("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");});      
        }); 
    });

Moob · Accepted Answer · 2013-11-03 14:58:31

Есть масса способов сделать это. Один из самых простых состоит в том, чтобы иметь два состояния в одном изображении, а затем просто изменить положение фона при наведении. Таким образом, нет никакого дополнительного ожидания загрузки изображения при наведении, поскольку оно уже есть.
<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