Change Background Color with mouse Over reference by class JQuery -

Change Background Color with mouse Over reference by class JQuery -

i have given class grouping of div's , want alter background color of div on mouse on it. did : html

<div class="menu_top"> <div id="1" class="menu_top_menu">home</div> <div id="2" class="menu_top_menu">about us</div> <div id="3" class="menu_top_menu">register</div> <div id="4" class="menu_top_menu">contact us</div> </div>

jquery

$(document).ready(function() { $('.menu_top_menu').mouseover(function(){ $('this').attr('style','background-color:yellow;'); }); });

this work id reference want work class. doing wrong ?

use $(this) instead of $('this') - no quotation marks around this.

also, wouldn't utilize attr() set style, you'd utilize .css() method set particular css property in question:

$(this).css('background-color', 'yellow');

note if intention alter background while mouse on element (i.e., alter on mouse out) can no js @ using :hover pseudo-class in css:

div.menu_top_menu:hover { background-color : yellow; }

jquery