jQuery Slide 菜单悬停动作

Posted 2023-05-08

【中文标题】jQuery Slide 菜单悬停动作

【英文标题】：jQuery Slide menu hover action

【发布时间】：2011-05-09 08:54:25

【问题描述】：

好的事情是这样的，我有2个div，一个是我的导航， 另一个有相同数量的 li 标签，其 id 与我的导航几乎相同，这些 li 标签包含一个 graphic 假设在悬停导航时 slide。 让我解释一下……

这是我的导航

<ul id="navInside">
  <li><a id="nInicio" href="index.php" >Inicio</a></li>
  <li><a id="nHistoria" href="history.php" >Historia</a></li>
  <li><a id="nQuienes" href="aboutus.php" >Quienes somos</a></li>

这是应该移动的

<ul id="navSlides">
  <li id="SnInicio"></li>
  <li id="SnHistoria"></li>
  <li id="SnQuienes"></li>

这是我现在得到的jQuery代码......

    $('#navInside li').hover(function ()
    $("#S" + this.id).animate(top: '0px', 500), function ()
    $("#S" + this.id).animate(top: '-70px', 500, 'swing'); 
);  

您能帮我获得正确的选择器以使其正常工作吗？

我被困了好几天... 谢谢

【问题讨论】：

一些小事情，比如寻找比您认为的低一级的 ID，但尼克已经成功了。有时我会使用“jQuery Selectors”Chrome 扩展程序来确保在遇到问题时处理正确的元素。

【参考方案1】：

id 位于锚点上，而不是 <li>（this 所指），因此您的悬停应该是：

$('#navInside li a').hover(function ()
  $("#S" + this.id).animate(top: '0px', 500);
, function ()
  $("#S" + this.id).animate(top: '-70px', 500, 'swing');
);  

或者，使用您拥有的代码并将id 移动到<li>，如下所示：

<ul id="navInside">
  <li id="nInicio"><a href="index.php" >Inicio</a></li>
  <li id="nHistoria"><a href="history.php" >Historia</a></li>
  <li id="nQuienes"><a href="aboutus.php" >Quienes somos</a></li>

【参考方案2】：

对不起，我不清楚 $("#S" + this.id) 是什么？我在 html 的其他任何地方都没有看到 id="S" ...

【讨论】：

嗨，那是因为 有一个 id="navInside" 和另一个 id="navSlides"，当悬停在 navInside 的时，然后移动幻灯片（在幻灯片中，您可以使用颜色框或图像或图标来移动 ^^ 真的很酷……您可以在 www.conelectricas.com 中查看最终结果