hover - Basic jQuery navigation color change -

i'm struggling find answer arguably 1 of basic jquery questions:

i following change 'a' elements background color blue (i expect it's simple syntax issue)

[i aware best done in css, trying learn jquery]

html:

<ul>     <li><a href="">make</a></li>     <li><a href="">me</a></li>     <li><a href="">blue</a></li> </ul> 

css:

ul {      list-style:none; }  li {      float:left; }  {      display:block;      text-decoration:none;      background-color:red;      height:40px;      width:100px;      margin-right:1px;      text-align:center;      line-height:40px;      color:white; } 

jquery:

$('a').hover(function() {     $('a').css('background-color', 'blue'); }); 

the jsfiddle here: http://jsfiddle.net/liquidengine/jrm2k/2/

there's nothing in jsfiddle. need @ code , try , understand it's trying do. in example, whenever a hovered, setting color of all anchors blue. haven't tried handle mouseout event. try this:

$('a').hover(function() {    // set background colour of hovered anchor    $(this).css('background-color', 'blue'); }, function() {    // remove background colour when hovered off    $(this).css('background-color', ''); }); 

i know said don't want use css because want learn jquery, job css. if want learn jquery, try build things jquery required for. because should never, ever use jquery this. , here's hot tip: should ever wish change colour of elements using jquery (say, on click), @ least use classes. don't set properties using jquery. example:

$('a').hover(function() {   $(this).toggleclass('hovered'); }); 

css:

a.hovered {   background-color: blue;   /* other styles here */ }