Селектор Jquery: Как: изменить атрибут src тега изображения при наведении ссылки

Question

Мне нужно изменить атрибут src изображения при наведении ссылки на

<div class="clear span-33 last" id="navigation">
  <div class="hicon span-1"><a href="#" title="Homepage"><img src="../Assets/images/home.png" /></a></div>
</div>   

Также измените его на значение по умолчанию, когда ссылка не находится на ...

Answer 1

Вы действительно должны изучить использование спрайтов CSS для переключения фона при наведении курсора. Но если вам нужно сделать это в jQuery, что-то подобное должно сделать это. Просто измените исходное изображение по своему вкусу (также предварительно загружает наведенное изображение):

var link = $('a'), 
    img  = link.children('img'), 
    orig = img.attr('src'), 
    over = 'over.png', 
    temp = new Image();

temp.src = over; // preloads

link.hover(function() {
    img.attr('src',over);
},function() {
    img.attr('src',orig);
}

Answer 2

Я понимаю, что иногда вы не можете просто поменять положение фона, поэтому я тоже искал это с помощью навигации по IMG (слишком просто rmbr для загрузки jquery):

<script type="text/javascript">
$(document).ready(function(){

    $(".navbar li").each(function(){
        var link = $(this).children("a");
        var image = $(link).children("img");
        var imgsrc = $(image).attr("src");

        // add mouseover
        $(link).mouseover(function(){
            var on = imgsrc.replace(/.jpg$/gi,"_over.jpg");
            $(image).attr("src",on);
        });

        // add mouse out
        $(link).mouseout(function(){
            $(image).attr("src",imgsrc);
        });
    });

});
</script>



<ul class="navbar"><li><a href="#"><img src="/images/nav_home.jpg" alt="home" /></a></li>
    <li><a href="#"><img src="/images/nav_item2.jpg" alt="Item2" /></a></li>
    <li><a href="#"><img src="/images/nav_item3.jpg" alt="Item3" /></a></li>
     </ul>

Answer 3

Этот вопрос может помочь: img src & jQuery?

Answer 4

Это мой подход, и он работает, но выглядит слишком странно и сделал меня новичком в jQuery

                $('.hicon > a').hover(
                                  function(){
                                      $(this).html("<img src='../Assets/images/homeah.png' />");
                                      },
                                  function(){
                                      $(this).html("<img src='../Assets/images/home.png' />");
                                      }
                                  );

Я верил, что есть лучший подход. Спасибо

Answer 5

Это должно сделать это.

$('a[title="Homepage"]').hover(
    function () {
        // this is the mouseon event
        $(this).children('img').attr('src', 'newimage.png');
    }, 
    function () {
        // this is the mouseout event
        $(this).children('img').attr('src', '../Assets/images/home.png');
    }
);