7

一連のスライドを一度に 1 つずつ表示する div があります。ボックスの下部に、次のスライドへの切り替えをトリガーするリンクが含まれています。リンクをクリックすると、ボックスに次のスライドが表示され、ほとんどの場合、ボックスの高さが変わります。

リンクに:hoverスタイルを適用しましたが、ボックスの高さが変わり、リンクがマウスの下から移動すると、:hover再びホバーするまでその状態が維持されます。

変更が完了した後に呼び出してみまし.mouseleave()た.mouseenter().mouseleave()が、効果はありません。また、リンクに対して別の:active&:focusステートを作成しました。これは、リンクがクリックされたときに一瞬表示されますが、その後:hover. :visitedスタイルも効果がありません。

古いバージョンの IE にこれに似た一般的なバグがあることは知っていますが、これは Chrome と Firefox でも発生しています。

ここにjsfiddleがあります。

何か案は？

4

2 に答える 2

2

jsFiddle デモ

答えはとても簡単です。マウス クリックを放すと、ページがジャンプしてコンテンツが表示されるため、ブラウザのデフォルトの動作になります。mouseleave と toggle クラスを登録するには、見逃しています。

修正は次のとおりです。

CSS:

a:active, a:selected, a:visited { /*  add his to remove stupid dotted outline */
    border: none;
    outline: none;
}

jQ1:

    $('#prev-page').on('mousedown', function (e) { // use mousedown (some issues with chrome)
        e.preventDefault();
        showPage(pages.index($($(this).attr('href')), 600));
    });
    $('#next-page').on('mousedown', function (e) { // here too!
        e.preventDefault();
        showPage(pages.index($($(this).attr('href'))), 600);
    });

jQ2:

pages.hide().eq(active).fadeIn(fadeTime, function () {
    // $('#next-page').trigger('mouseleave'); // remove to fix in FF
});
于 2012-04-26T15:15:15.227 に答える
-1

CSS クラスを使用してボックスの高さを切り替え、ホバー状態がそのクラスに対してのみ存在することを確認します。

.box {
 height: 0;
}

.box span {
 display: none;
}

.box.open {
 height: 400px;
}

.box.open:hover span {
 display: block;
}
于 2015-08-06T08:00:00.003 に答える