gpt4 book ai didi

jquery - 滑动悬停菜单文本切换不适合

转载 作者:行者123 更新时间:2023-11-28 12:17:02 25 4
gpt4 key购买 nike

我正在尝试创建一个菜单,在元素上悬停元素幻灯片的宽度,背景图像在右边,文本出现在左边。现在,当我这样做时,文本的显示效果不佳 - 文本产生了一些跳跃效果。任何人都可以帮我修复这个菜单吗?

这是 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

最佳答案

我的拙见

  1. 您的标记不是语义的:它应该是 ul > li > a 而不是 ul > a> li > p
  2. 我的方法将仅使用 CSS,并且没有我在您的方法中看到的那么多代码膨胀(明智的 JS、CSS 和 HTML)。无需 JS 添加类。东西like this .
  3. 请注意我是如何在 li 上使用属性 hover 的。这不适用于 IE8 及更低版本。

关于jquery - 滑动悬停菜单文本切换不适合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19109927/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com