0

2行の名前を含むヘッダーを持つWebサイトを設計しています。ユーザーが名前の1つにカーソルを合わせると、名前の下に特定のdivが表示される必要があります。このdivには他の画像とリンクが含まれているため、ユーザーはマウスを名前からdivに移動できる必要があります。

簡単にするために、名前の一番上の行を「top」と呼び、関連するdivを「top-reveal」と呼び、名前の一番下の行を「bottom」と「bottom-reveal」と呼びます。（リンクされたjsfiddleを参照してください。）

「Top-reveal」と「bottom-reveal」は同じ場所に表示する必要があり、上記の名前と重複することはできません。

最初にストレートCSSdiv：first-childを使用しようとしましたが、ユーザーの「インテント」を制御できませんでした。

次に、hoverIntentプラグインを使用してjQueryアプローチに切り替えました。

var timeHover = 700;

$("[id^='top']").hoverIntent({
    over: topRevealer,
    timeout: timeHover,
    out: topHider
});
$("[id^='bottom']").hoverIntent({
    over: bottomRevealer,
    timeout: timeHover,
    out: bottomHider
});

function topRevealer() {
    setTimeout(function () {
        $('#bottom-reveal').hide(), $('#top-reveal').fadeIn();
    }, timeHover);
}

function bottomRevealer() {
    setTimeout(function () {
        $('#top-reveal').hide(), $('#bottom-reveal').fadeIn();
    }, timeHover);
}

function topHider() {
    $('#top-reveal').hide()
}

function bottomHider() {
    $('#bottom-reveal').hide()
}

.hover（）でタイムアウトを実行する方法がわからなかったため、hoverIntentを使用しています。これは、reveal divがフェードアウトしてから元に戻ることを除いて機能します。これは、マウスが「Top」から「Top-Reveal」に移動すると「TopHider」を呼び出し、マウスが「TopRevealer」に入ると「TopRevealer」を呼び出すためです。 "Top-Reveal" divですが、ポップインおよびポップアウトしたくありません。また、フェードインとフェードアウトのキューが作成される可能性があり、ある種のエラーキャッチャーを作成する方法がわかりません。

私がいる場所をいじる：http：//jsfiddle.net/UFZ6U/

ご覧のとおり、ほぼ完成していますが、最後のプッシュのためのガイダンス、またはJavaScriptコーディングを改善するためのヒントが必要です。スタンドアロンスクリプトをダウンロードする以外にJavaScriptを使い始めたのはつい最近のことで、今では何度も頭を悩ませています。私は最も簡単な答えを探しています。jQueryや純粋なCSSである必要はなく、軽量で実用的なソリューションです。私もhoverIntentと結婚していませんが、それは私をここまで到達させるのに役立ちました。

これが理にかなっていることを願っています。

すべての潜在的な回答者に感謝します。

4

1 に答える 1

0

すでにタイムアウトを使用している場合は、タイムアウト ID を選択的に保存およびクリアして、この効果を作成できます。次のソリューションでは、hoverIntent jQuery プラグインを使用しません。

HTML

<div id="hover-area">
    <div id="one" class="hoverable">One</div>
    <div id="two" class="hoverable">Two</div>
    <div id="three" class="hoverable">Three</div>
    <div id="four" class="hoverable">Four</div>
    <div id="one-reveal" class="revealable">One Reveal</div>
    <div id="two-reveal" class="revealable">Two Reveal</div>
    <div id="three-reveal" class="revealable">Three Reveal</div>
    <div id="four-reveal" class="revealable">Four Reveal</div>
</div>

JS

var timeHover = 700;

// Setup reveal and hide on hoverable items
$('.hoverable').on({
    'mouseenter': function() {
        // Get the hoverable ID
        var hoverableId = $(this).attr('id');
        // Generate the associated revealable ID
        var revealableId = hoverableId + '-reveal';
        // Show the associated revealable item (after timeout)
        showRevealable('#' + revealableId);
    },
    'mouseleave': function() {
        // Get the hoverable ID
        var hoverableId = $(this).attr('id');
        // Generate the associated revealable ID
        var revealableId = hoverableId + '-reveal';
        // Hide the associated revealable item (after timeout)
        hideRevealable('#' + revealableId);
    }
});

// Set up to maintain visibility and hide for the revealable items
$('.revealable').on({
    'mouseenter': function() {
        // Clear the timeout for this revealable item
        clearRevealableTimeout(this);
    },
    'mouseleave': function() {
        // Hide the revealable item (after timeout)
        hideRevealable(this);
    }
});

// Clears the timeout for the given revealable container
function clearRevealableTimeout(revealable) {
    // Get the associated timeout ID from the data attribute
    var timeout = $(revealable).data('timeout');
    // Clear the associated timeout
    clearTimeout(timeout);
}

// Shows the given revealable item (after a delay)
function showRevealable(revealable) {
    // Set a new timeout for the show and get the associated ID
    var timeout = setTimeout(function () {
        // Hide any existing revealables that are not this one
        $('.revealable').not(revealable).hide();
        $(revealable).stop().fadeIn();
    }, timeHover);
    // Store the timeout ID in the data attribute
    $(revealable).data('timeout', timeout);
}

// Hides the given revealable item (after a delay)
function hideRevealable(revealable) {
    // Clear the timeout to prevent any pending behavior
    clearRevealableTimeout(revealable);
    // Set a new timeout for the hide and get the associated ID
    var timeout = setTimeout(function () {
        $(revealable).hide();
    }, timeHover);
    // Store the timeout ID in the data attribute
    $(revealable).data('timeout', timeout);
}

デモ

于 2013-03-08T18:54:25.483 に答える