滑動懸停菜單文本切換不適合

我想創建一個菜單項目懸停的項目幻燈片的寬度與背景圖像的權利，文本出現在左側。現在當我這樣做時，文字的顯示效果並不好 - 文字正在做一些跳躍效果..任何人都可以幫我修理這個菜單嗎？滑動懸停菜單文本切換不適合

下面是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

來源

2013-10-01 Darko Petkovski

嘗試設置文本對齊左側的錨點。你的html也是不正確的。 ul - > a - > li無效。 –

順便說一下，可以在不使用Javascript的情況下實現滑出效果。這是一個[概念證明]（http://jsbin.com/uKeXApE/3/edit）。不確定它是否有幫助，但可能更容易管理解決方案。 –

在我的愚見

您的標記ISN」 t語義：應該是ul > li > a而不是ul > a> li > p。
我的方法只有CSS，沒有那麼多的代碼膨脹，就像我在你的（JS，CSS和HTML明智的）中看到的那樣。不需要JS來添加類。東西like this。
請注意我在li上如何使用屬性hover。這不適用於IE8及以下版本。

來源

2013-10-01 07:48:36

感謝您的解決方案 –

滑動懸停菜單文本切換不適合

回答

相關問題