9

私は、素敵な小さなホバー効果を生み出すことがわかった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');">
4

2 に答える 2

20

これを 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>
于 2013-03-08T11:38:26.870 に答える
5

痛い、なぜあなたはすべてのjavascriptをhtmlコードに入れるのですか？

<script>javacsriptでいくつかのタグを追加する必要があります。

ウィンドウの読み込み時に色を付けるには、これを追加するだけです：

<script type="text/javascript">
$(window).load(function() {
    $('.your-item-class').css('background-color','lightGrey'); 
});
</script>
于 2013-03-08T11:35:15.367 に答える