使用 jQuery 在 div 上设置背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15292988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set background color on div with jQuery?
提问by michaelmcgurk
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/
我一直在使用一段 HTML/JavaScript 代码，我发现它产生了一个不错的悬停效果：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 greenthen 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');">
回答by Alvaro
You can do it addding this in the Javascript or Js file:
您可以在 Javascript 或 Js 文件中添加此内容：
$(document).ready(function(){
$('.slides_item').children('div').css('background','#8ec252')
});
Working demo: http://jsfiddle.net/RaEER/6/
工作演示：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:
无论如何，您应该将 Javascript（在本例中为 jQuery）与您的 HTML 分开。您应该将它包含在页面的标题中，例如：
<script src="path_to_your_js/file.js"></script>
回答by soyuka
Ouch, why are you putting all javascript in the html code ?
哎呀，你为什么把所有的 javascript 都放在 html 代码中？
You should add some <script>tags with your javacsript.
您应该<script>在 javacsript 中添加一些标签。
To color on window load just add this :
要在窗口加载时着色，只需添加以下内容：
<script type="text/javascript">
$(window).load(function() {
$('.your-item-class').css('background-color','lightGrey');
});
</script>
