Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set background color on div with jQuery?

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');">
like image 438
michaelmcgurk Avatar asked Mar 08 '13 11:03

michaelmcgurk


People also ask

How to change the background color of an element using jQuery?

You can change the <body> background color by first selecting the element using jQuery selector $ () and chain it with the css () method as follows: The code above will change the background color from yellow to blue. You can also trigger the color change when a <button> element is clicked by using the .click () event handler method from jQuery.

How to change background color on mouse hover using jQuery?

To change the background color using jQuery, use the jQuery css() property. We will change background color on mouse hover with the jQuery on() and css() method. You can try to run the following code to learn how to change background color using jQuery: © Copyright 2019.

How to set background color of 4th Division to red using jQuery?

In this article, we will set the background color of 4th division to red by adding an appropriate class in jQuery. Approach: The i th occurrence of an element in the DOM can be located in the DOM using the eq () method. The eq () method returns the i th element of the DOM of that element selected. It considers 0 based indexing.

How do I add a class to a Div in jQuery?

Approach 1: Select the body by using jQuery selector. Find the 4th div from the body and then add the class using the addClass () function to the returned jQuery object. Since it is 0 based indexing, we select the div at the 3rd index.


2 Answers

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>
like image 171
Alvaro Avatar answered Oct 12 '22 23:10

Alvaro


Ouch, why are you putting all javascript in the html code ?

You should add some <script> tags with your javacsript.

To color on window load just add this :

<script type="text/javascript">
$(window).load(function() {
    $('.your-item-class').css('background-color','lightGrey'); 
});
</script>
like image 27
soyuka Avatar answered Oct 12 '22 23:10

soyuka