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');">
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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.