jquery problem: hover

Question

Hi, i can't understand why just the first function ($("#ContentWel")) works.

But if I put the second function ("#ContentCan") in the first place it only works:

$(document).ready(function(){

    $("#ContentWel").hover(function(){
    $('#counterimage').attr('src', 'img/01.png');
    });

    $("#ContentCan").hover(function(){
    $('#counterimage').attr('src', 'img/02.png');
    });

    $("#ContentCli").hover(function(){
    $('#counterimage').attr('src', 'img/03.png');
    });

    $("#ContentTesti").hover(function(){
    $('#counterimage').attr('src', 'img/04.png');
    });

    $("#ContentCont").hover(function(){
    $('#counterimage').attr('src', 'img/05.png');
    });

    $("#ContentPri").hover(function(){
    $('#counterimage').attr('src', 'img/06.png');
    });

});

Thanks, Guilherme

Answer 1

.hover() need a mouseenter and mouseleave function

$("#ContentWel").hover(function(){
    $('#counterimage').attr('src', 'img/01.png');
 }, function(){
    // something else happens
});

or you just use mouseenter:

$("#ContentWel").mouseenter(function(){
    $('#counterimage').attr('src', 'img/01.png');
});

Answer 2

To gain more visibility into your functions add try/catches

try {
 $("#ContentWel").hover(function(){
    $('#counterimage').attr('src', 'img/01.png');
    });
 } catch (e) { if (window.console !== undefined && window.console.log !== undefined) { window.console.log(e.message); } else { alert(e.message); } }
 try {
    $("#ContentCan").hover(function(){
    $('#counterimage').attr('src', 'img/02.png');
    });
 } catch (e) { if (window.console !== undefined && window.console.log !== undefined) { window.console.log(e.message); } else { alert(e.message); } }
 try {
    $("#ContentCli").hover(function(){
    $('#counterimage').attr('src', 'img/03.png');
    });
 } catch (e) { if (window.console !== undefined && window.console.log !== undefined) { window.console.log(e.message); } else { alert(e.message); } }
 try {
    $("#ContentTesti").hover(function(){
    $('#counterimage').attr('src', 'img/04.png');
    });
 } catch (e) { if (window.console !== undefined && window.console.log !== undefined) { window.console.log(e.message); } else { alert(e.message); } }
 try {
    $("#ContentCont").hover(function(){
    $('#counterimage').attr('src', 'img/05.png');
    });
 } catch (e) { if (window.console !== undefined && window.console.log !== undefined) { window.console.log(e.message); } else { alert(e.message); } }
 try {
    $("#ContentPri").hover(function(){
    $('#counterimage').attr('src', 'img/06.png');
    });
 } catch (e) { if (window.console !== undefined && window.console.log !== undefined) { window.console.log(e.message); } else { alert(e.message); } }