javascript - 用jQuery在div上设置背景颜色？

Question

我一直在使用一段 HTML / JavaScript 代码，我发现它可以产生一个很好的小悬停效果：http: //jsfiddle.net/RaEER/1/

• 您首先会注意到占位符图像上方有一个空白区域。

• 当我将鼠标悬停在它上面时，它变为绿色，然后我将鼠标悬停，它变为浅灰色。

当页面加载时，有什么办法可以让这个白色区域变成浅灰色？

如果它有帮助，这与这里的这行代码有关：

<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

您可以在 Javascript 或 Js 文件中添加它：

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

工作演示：http: //jsfiddle.net/RaEER/6/

无论如何，您应该将 Javascript（在本例中为 jQuery）与 HTML 分开。您应该将其包含在页面标题中，例如：

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

Answer 2

哎呀，你为什么把所有的 javascript 都放在 html 代码中？

<script>您应该在您的 javacsript 中添加一些标签。

要在窗口加载时着色，只需添加以下内容：

<script type="text/javascript">
$(window).load(function() {
    $('.your-item-class').css('background-color','lightGrey'); 
});
</script>