我一直在使用一段 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');">
最佳答案
您可以在 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>
关于javascript - 使用 jQuery 在 div 上设置背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15292988/