0

アイテムがアイテムスライドの幅をホバーし、背景画像が右側にあり、テキストが左側に表示されるメニューを作成しようとしています。これを行うと、テキストの表示が見栄えがよくありません.テキストがジャンプ効果を発揮しています..このメニューを修正するのを手伝ってくれる人はいますか?

html は次のとおりです。

<ul id="menu" align="center">

<a title="Passwords Management" href="admin-passwords-management.php"><li id="menu-item" class="menu-first"><p class="" style="display: none;">Passwords management</p></li></a>
        <li id="menu-item" class="website-not-active"><img src="../dashboard/images/menu2.png"></li>
        <a href="admin-facebook-management.php"><li id="menu-item" class="menu-third"><p class="" style="display: none;">Facebook apps management</p></li></a>
        <a href="admin-email-management.php"><li id="menu-item" class="menu-fourth"><p class="" style="display: none;">Email management</p></li></a>
                <a href="dashboard-billing.php"><li id="menu-item" class="menu-bill"><p class="" style="display: none;">Billing management</p></li></a>
        <a href="dashboard_client_settings.php"><li id="menu-item" class="menu-fifth"><p class="" style="display: none;">Client info</p><!--<img src="../dashboard/images/menu5.png"/>--></li></a>
    </ul>

そしてJS：

$(".menu-first").on({
    mouseenter: function() {
    $(this).addClass("hover");
    $(".menu-first p").addClass("normal");
    $(".normal").toggle("fast");
    },
    mouseleave: function() {
    $(this).removeClass("hover");
    $(".normal").toggle("fast");
    $(".menu-first p").removeClass("normal");
    }
});

$(".menu-bill").on({
    mouseenter: function() {
    $(this).addClass("hover");
    $(".menu-bill p").addClass("normal");
    $(".normal").toggle("fast");
    },
    mouseleave: function() {
    $(this).removeClass("hover");
    $(".normal").toggle("fast");
    $(".menu-bill p").removeClass("normal");
    }
});

$(".menu-second").on({
    mouseenter: function() {
        $(this).addClass("hover");
    $(".menu-second p").addClass("normal");
    $(".normal").toggle("fast");
$(".menu-second p").fadeIn(200);
    },
    mouseleave: function() {
        $(this).removeClass("hover");
    $(".normal").toggle("fast");
    $(".menu-second p").removeClass("normal");
$(".menu-second p").fadeOut(200);

    }
});

$(".menu-third").on({
    mouseenter: function() {
        $(this).addClass("hover");
    $(".menu-third p").addClass("normal");
    $(".menu-third p").toggle("fast");
    },
    mouseleave: function() {
        $(this).removeClass("hover");
    $(".normal").toggle("fast");
    $(".menu-third p").removeClass("normal");

    }
});

$(".menu-fourth").on({
    mouseenter: function() {
        $(this).addClass("hover");
    $(".menu-fourth p").addClass("normal");
    $(".normal").toggle("fast");
    },
    mouseleave: function() {
        $(this).removeClass("hover");
    $(".normal").toggle("fast");
    $(".menu-fourth p").removeClass("normal");

    }
});

$(".menu-fifth").on({
    mouseenter: function() {
    $(this).addClass("hover");
    $(".menu-fifth p").addClass("normal");
    $(".normal").toggle("fast");
    },
    mouseleave: function() {
    $(this).removeClass("hover");
    $(".normal").toggle("fast");
    $(".menu-fifth p").removeClass("normal");

    }
 });

これがjsFiddleです

4

1 に答える 1

0

私の愚見で

  1. あなたのマークアップはセマンティックではul > li > aありませんul > a> li > p。
  2. 私のアプローチは CSS のみであり、あなたのアプローチ (JS、CSS、および HTML に関して) に見られるほどコードの肥大化はありません。JS でクラスを追加する必要はありません。このようなもの。
  3. のプロパティをどのように使用しているかに注意してhoverくださいli。これは IE8 以下では機能しません。
于 2013-10-01T07:48:36.123 に答える