2011-12-15 3 views
0

DIV(.thumbnail)のいくつかのCSSプロパティ(.thumbnail)をマウスの上に置くと、次のコードを試してみました。しかし、それは動作しません!どのようなヒントであれ、それをどのように働かせるかは良いでしょう。可能であれば、変更がアニメーション化されるようにします。ホバー上でDivスタイルが変更されますか?

$(document).ready(function(){ 
    $(".thumbnail").hover(
     function(){ 
      $(".overthumb").show(); 
     }, 
     function(){ 
      $(".overthumb").hide(); 
     } 
    ); 
}); 
+0

を使用していた私は、あなたがHTMLを投稿することができ、これは単にCSSで行うことができると思いますか? – FakeRainBrigand

+1

「それは働かない」という意味ですか?あなたが望む結果は何ですか?オーバーサムはサムネイルのホバーに隠されています – ggzone

答えて

2

これはすべてCSSで行うことができます。


http://jsfiddle.net/6wQp3/

はHere updated versionです。私は position: relative;にdivを設定するのを忘れました。オーバーレイは親divを基準にして表示されるようになりました。

+0

驚くほど良いロジック。 –

+0

同じページに複数のサムネイルを表示するにはどうすればよいですか?同じコードを再現する必要はなく、すべてのサムネイルに異なるクラス名を使用する必要はありませんか? – Andy

+1

@Andy、[the update](http://jsfiddle.net/6wQp3/5/)を参照してください。私はそれが今修正されるべきだと思う。 – FakeRainBrigand

1

それは私の作品

はあなたの最初の要素はクラスと呼ばれるサムネイルがあることを確認され、第2は、ここで

overthumbと呼ばれるクラスを持っていることは、作業サンプルですいくつかのCSSプロパティを変更するには、次の例を参考にしてください(背景色を更新します)

$(document).ready(function(){ 
$(".thumbnail").hover(
    function(){ 
     $(".overthumb").css('background', '#C1A3A5').show(); 
    }, 
    function(){ 
     $(".overthumb").css('background', '#FFF').hide(); 
    } 
); 

}); 

working s十分:http://jsfiddle.net/qBsya/4

1

私はcssの:hover機能を使用して、IE用の少量のjavascriptを使用します。

1

提供されているコードが正しいように見えるので、別の場所に問題がある可能性があります。

cssを使用して同じことを達成できます。これはクリーナーなので、これもお勧めします。 :hoverで他のjavascriptメソッドを実行しない場合は、これを行う方法です。

.thumbnail:hover .overthumb { 
    /* display:block; */ 
    display:inline; 
} 

.thumbnail .overthumb { 
    display:none; 
} 
+0

アドバイスをよろしくお願いします。私は何か他のことをしていて、それを適応させようとした少しのコードを取った。失敗しました。再度、感謝します。 – Andy

1

このFiddleをチェックし、あまりにも単純なアニメーションをした、私はjQueryのAnimate()機能

+0

@Andyこれを他の例で確認してください。 –

関連する問題