html - jQuery "thumbnail" function -

i'm trying develop "featured posts" thingys. , them change when mouseover() them. guess done jquery, tried started i'm quite sucky thought i'd ask here.

i've come jquery code:

$(document).ready(function) {     $("#f_post_long").mouseover(function)     {         $("#f_post_long").append("<div class="hello">hello</div>");     }); }); 

i thought .appending new div class same class i've got styled in css needed(?) not sure there though.

css looks this:

#f_post_long {     width:500px;     height:500px;     background-color:red;     text-align:center; }  .hello {     background-color:blue;     width:200px;     height:200px;     } 

html contains element #f_post_long.

am on right track or screwed here? don't want perfect solution pointers in right directions on easiest against server , in amount of code written!

like zenith said, must escape "" in code, or use single quotes inside double quotes.

the parenthesis after function should () not ).

i used $(this) keyword instead of directly referencing same element clarity.

finally, if want featured posts "change" said, instead of added to, need use .html() function, not append().

fixed code:

$(document).ready(function() {     $("#f_post_long").mouseover(function() {         $(this).html("<div class='hello'>some different content.</div>");     }); }); 

jsfiddle: http://jsfiddle.net/rowlandrose/emtjq/2/