Set background color on div with jQuery?

Question

I have been working with a piece of HTML / JavaScript code I found to produce a nice little hover effect: http://jsfiddle.net/RaEER/1/

• You'll notice at first there is a white space above the placeholder image.

• When I mouseover over it, it goes green then I mouseout, it goes light grey.

Is there any way I can get this white area to be light grey when the page loads?

If it helps, it's all to do with this line of code here:

<div class="slides_item post-thumb" style="
background:#ededed!important"
onmouseover="
$(this).find('.hover_the_thumbs').css('background-color','rgba(0, 0, 0, 0.6)'); 
$(this).find('.magnify_this_thumb').css('left', '51%').css('opacity',1); 
$(this).find('.hyperlink_this_thumb').css('left', '43%').css('opacity',1); 
$(this).children('div').css('background','#8ec252');  
$(this).find('.p_title a').css('color', 'white'); 
$(this).find('.p_exerpt p').css('color', 'white'); 
$(this).find('.p_title').css('border-top', '0');" 

onmouseout="
$(this).find('.hover_the_thumbs').css('background-color','rgba(0, 0, 0, 0)'); 
$(this).find('.magnify_this_thumb').css('left', '-15%').css('opacity',0); 
$(this).find('.hyperlink_this_thumb').css('left', '105%').css('opacity',0); 
$(this).children('div').css('background','#fff'); 
$(this).find('.p_exerpt p').css('color', ''); 
$(this).find('.p_title a').css('color', ''); 
$(this).children('div').css('background','#ededed'); 
$(this).find('.p_title').css('border-top', '0');">

Answer 1

You can do it addding this in the Javascript or Js file:

$(document).ready(function(){
    $('.slides_item').children('div').css('background','#8ec252')
});

Working demo: http://jsfiddle.net/RaEER/6/

Anyway, you should separate the Javascript (jQuery in this case) from your HTML. You should o it including it in the header of the page, for example:

<script src="path_to_your_js/file.js"></script>