0

ポートフォリオ用に、写真とサブテキストを追加したキャプションを含むエントリーを作成しました。画像にカーソルを合わせると、画像がグレースケールからカラーに変わります (CSS 画像置換)。キャプションにカーソルを合わせると、上にスライドしてサブテキストが表示されます。

この 2 つの機能を組み合わせたいと考えています。エントリのどこかにカーソルを合わせると、画像がグレースケールからカラーに変わり、サブテキストがスライドアップします。

JSfiddle をセットアップしました: http://jsfiddle.net/blendwerk/q8HtS/

どうすれば目標を達成できますか。どんな助けにも感謝します。

4

3 に答える 3

0

望ましい効果は次のとおりです。

$(function() {
    $(".fadeimg").find(".spanimg").hide();
    $(".fadesub").find(".spansub").hide();

    $(".fadeimg").hover(
        function(){
            $(this).find(".spanimg").stop(true, true).fadeIn(1000);
            $(this).next().find(".spansub").stop(true, true).slideDown(500);
        },
        function(){
            $(this).find(".spanimg").stop(true, true).fadeOut(1000);
            $(this).next().find(".spansub").stop(true, true).slideUp(500);
        }
    );
     $(".fadesub").hover(
         function() {
            $(this).find(".spansub").stop(true, true).slideDown(500);
            $(this).prev().find(".spanimg").stop(true, true).fadeIn(1000);
         }, 
         function() {
            $(this).find(".spansub").stop(true, true).slideUp(500);
            $(this).prev().find(".spanimg").stop(true, true).fadeOut(1000);
         }
     );
});
于 2012-04-04T10:25:50.857 に答える
0

http://jsfiddle.net/q8HtS/3/

領域全体にマウス イベントを画像とテキストで添付するだけで済みます。イベントを再バインドするための保険として、将来それらを個別に再バインドするように名前空間を設定できます。

于 2012-04-04T10:09:59.990 に答える
0

このように、ラッピング div にホバー イベントを 1 つだけ追加してみてください。

http://jsfiddle.net/C8yV7/

現在、ページ幅の 100% である div のサイズを制限する必要があるかもしれないことに注意してください。

于 2012-04-04T10:18:02.070 に答える