0

私はこれを達成しようとしています:

トリガーを含む全幅および高さの画像を示すボックスを表示します。トリガーにカーソルを合わせると、DIV がボックスを覆うように展開され、クリック可能なリンクを含むいくつかのコンテンツが表示されます。カーソルを画像ボックスの外に移動すると、DIV カバーが消え、ボックスが元の状態に戻ります。

私がいる場所は次のとおりです。

http://jsfiddle.net/wfXYy/1/

私は2つのことへのポインタを探しています:

  1. DIV (.content) のインスタンスが 1 つだけ表示されるようにする (つまり、ホバーしたボックス トリガーのコンテンツのみを表示する)。

  2. .content 内のテキスト (リンク) にカーソルを合わせたときに、表示されたコンテンツが閉じられず、元の状態に戻らないことを確認してください。ただし、リンクは問題なくクリックできます。

ポイント1については、「これ」が答えだと確信していますが、それを機能させることはできません。ポイント2については、テキストをホバリングするとトリガーが起動される理由が不思議です。

jQuery のこのブロック内ですべての作業を行う必要があることを確認してください。

$('.corner').hover(function() {
    $(this).addClass("corner-full").mouseout(function() {
        $(".corner").removeClass("corner-full");     
    });
    $('.content').fadeToggle();
});

どんなヒントでも大歓迎です、ありがとう。

4

2 に答える 2

1

次のように HTML を設定してみてください。

<div class="wrap">
    <div class="image-cover"> 
        <div class="corner">
            <div class="content">
                <h1>Title</h1>
                <a href="#">Link</a>
            </div>
        </div>
        <img src="http://dummyimage.com/300x300/ccc/ccc" />
    </div>
</div>

そして、次のようなjquery：

$('.corner').hover(function() {
    $(this).addClass("corner-full");
    $(".content", this).fadeToggle();
}, function() {
    $(this).removeClass("corner-full");
    $(".content", this).fadeToggle();
});
于 2013-06-18T21:03:40.733 に答える