1

私のスクリプトは、FF、Opera、IEでほぼ完全に機能します。ChromeとSafariは、わずかに異なる動作を示します。

ホバーは正常に機能しているようです。しかし、「選択された」liにカーソルを合わせると、追加のdivが追加されます。この追加のdivは、既存のdivとオーバーラップし、スムーズなホバー効果を提供しません。ChromeとSafariは、この追加のdivとは少し異なる動作をします。ChromeとSafariで選択したliにカーソルを合わせると、選択したliからdivが削除され、最初のliの前に追加されます。この追加のdivがjQueryスクリプトのどこから来ているかはわかっていますが、この問題を解決できません。

HTML：

<div class="navigation">
<ul class="nav">
    <li class="first"><a href="#">List 1</a></li>
    <li class=""><a href="#">List 2</a></li>
    <li class=""><a href="#">List 3</a></li>
    <li class="last selected"><a href="#">List 4</a></li>
</ul>

</ p>

CSS：

ul.nav li div.menu-hover { 
  width:10px; height:10px;
  background-color:black; position:absolute; left:40px; display:none;
}​

jQuery：

$("ul.nav > li").hover(

function() {
    $(this).prepend("<div class='menu-hover'></div>");
    $("ul.nav > li div.menu-hover").fadeIn("slow");
}, function() {
    $(this).find("div:last").remove();
});

$("ul.nav > li.selected").prepend("<div class='menu-hover'></div>");
$("ul.nav > li.selected > div.menu-hover").fadeIn("slow");​
4

2 に答える 2

0

hover（function1、function2）jQuery関数は、2つのコールバック関数である2つのパラメーターを取ります。これらは、mouseOverイベントが発生したとき、およびmouseOutが発生したときにそれぞれ呼び出されます。

コードでは、ホバー定義の直後に、選択したメニューを手動で追加しますが、ホバー関数は以前の手動追加を管理しないため、この特定のケースをコードに追加する必要があります。（メニューで初めてマウスを使用して入力する場合、mouseOutイベントはありません。）

$(document).ready(function() {

    $("ul.nav > li").hover(function() {
        // previously remove all potential menu-hover
        $(".menu-hover").remove();

        // prepend the menu at the good place and show it smoothly
        $(this).prepend("<div class='menu-hover'></div>");
        $("ul.nav > li div.menu-hover").fadeIn("slow");
    }, function() {
        // remove the menu on mouse Out
        $(this).find("div:last").remove();
    });

    // Manually select the first menu
    $("ul.nav > li.selected").prepend("<div class='menu-hover'></div>");
    $("ul.nav > li.selected > div.menu-hover").fadeIn("slow");
});
于 2012-09-27T23:44:14.640 に答える
0

現在のメニューホバー（現在選択されているメニュー）を修正する必要がある場合は、このバージョンのコードをテストできます。現在のメニューホバーをそのまま維持し、他のメニューのhover（）を管理します。これはメニューの基本的な動作です。

$(document).ready(function() {

    $("ul.nav > li").hover(function() {

        // Do not append menu-hover on selected li
        if ($(this).hasClass('selected'))
        return;

        // Append menu-hover on non-selected li
        $(this).prepend("<div class='menu-hover'></div>");
        $("ul.nav > li div.menu-hover").fadeIn("slow");

    }, function() {

        // Do not remove menu-hover on selected li
        if ($(this).hasClass('selected'))
            return;

        // Remove menu-hover on non-selected li
        $(this).find("div:last").remove();
    });

    // Manually set the current menu-hover
    $("ul.nav > li.selected").prepend("<div class='menu-hover'></div>");
    $("ul.nav > li.selected > div.menu-hover").fadeIn("slow");

});
于 2012-09-28T03:32:55.157 に答える