JQuery Hover function syntax

[Tarik Ansari]

Hi All,

I am new to JQuery and need a requirement of hover using css. I have the snippet which does the job but inorder to avoid code duplication i came up with a snippet for which facing issue with the syntax.

My Snippet with syntax issue:

$(document).ready(function() {   
myDivs = '3';  
 for(z=1;z<=myDivs;z++){        
$(".bu"+z).hover(function() {
 $(".bu"+z).css("color","red"); 
},function() { 
$(".bu"+z).css("color","blue"); 
} );    
}
});

Actual Snippet:

$(document).ready(function() {           
$(".bu1").hover(function() {
 $(".bu1").css("color","red"); 
},function() { 
$(".bu1").css("color","blue"); 
} );
$(".bu2").hover(function() {
 $(".bu2").css("color","red"); 
},function() { 
$(".bu2").css("color","blue"); 
} );
$(".bu3").hover(function() {
 $(".bu3").css("color","red"); 
},function() { 
$(".bu3").css("color","blue"); 
} );    
});

Just add 1,2,3 to .bu is the only requirement. i tried with for loop but facing issue with syntax.

Please help me

Thanks
tarik

[Eric Pascarello]

Why would you give them all separate classes? Give them all the same class and use this inside the object to work with the link.

$(document).ready(function() {   
    $(".bu").hover(
        function() {
             $(this).css("color","red"); 
        },function() { 
             $(this).css("color","blue"); 
        } 
    );    
});

Eric

[Tarik Ansari]

Hi Eric,

The reason why i needed bu1,bu2,bu3 is if i use common bu1 for the ahref, all are highlighted as a part of hover function. So thought i can have bu1,bu2 etc

$(".bu1").hover(function() {   
 $(".bu1").css("color","red");    
},function() {    
$(".bu1").css("color","blue");    
} );   

But using of 'this' eliminates the necessity of individual bu1,bu2,bu3 etc

$(".bu").hover(   
        function() {   
             $(this).css("color","red");    
        },function() {    
             $(this).css("color","blue");    
        }    
    );      

Hence, code works.

Thanks for the help

Tarik