Javascript 将鼠标悬停在上方时滑入链接

我要创建以下操作：

当您将鼠标移到固定在屏幕左侧的导航栏中的一段文本上时，第二段文本（或图像，如果更容易的话）将从页面左侧滑出。第二个文本或图像将位于第一个文本或图像下（可能的偏移量）。鼠标离开时，上面的效果会反转，只剩下第一段文本

---

我希望这是有意义的，我一直在网络上搜寻过渡和悬停效果，但我不能完全找到我所设想的。这里有一个我为你准备的小例子。它使用：

HTML：

<div class="text">
    <a>Text One</a>
    <a>Text Two</a>
</div>

.text{
    width:200px;
    position:relative;
}

.text > a{

    position:relative;
    left:-100%;
    display:none;

}

.text > a:first-child{

  left:0;
  display:block;

}

$(document).ready(function(){ // here we're only running the code when the page is ready

    $('.text > a:first-child').hover(function(){ // here we're targeting the first .text element

      $(this).siblings().css('display', 'block'); // we're making it visible
      $(this).siblings().animate({'left':'0%'}); // we're animating it out of it's hidden state

    }, function(){ // this function is passed as the second argument to the 'hover' method

      $(this).siblings().animate({'left':'-100%'}, 500, function(){ // animate back to hidden state

        $(this).css('display', 'none'); // when the animation is complete, hide it completely

    });
  });
});

JavaScript：

<div class="text">
    <a>Text One</a>
    <a>Text Two</a>
</div>

.text{
    width:200px;
    position:relative;
}

.text > a{

    position:relative;
    left:-100%;
    display:none;

}

.text > a:first-child{

  left:0;
  display:block;

}

$(document).ready(function(){ // here we're only running the code when the page is ready

    $('.text > a:first-child').hover(function(){ // here we're targeting the first .text element

      $(this).siblings().css('display', 'block'); // we're making it visible
      $(this).siblings().animate({'left':'0%'}); // we're animating it out of it's hidden state

    }, function(){ // this function is passed as the second argument to the 'hover' method

      $(this).siblings().animate({'left':'-100%'}, 500, function(){ // animate back to hidden state

        $(this).css('display', 'none'); // when the animation is complete, hide it completely

    });
  });
});

这里有一个关于jsFiddle的例子

---

显然，这个概念可以优化/发展…

您也可以尝试使用CSS转换来实现这一点。此外，本文也可以帮助您。这些都是一些很酷的功能，已经添加到收藏夹中了，谢谢，太完美了，这正是我想要的。非常感谢Hi Shenan，您的代码看起来像我想要的，尽管我在尝试将javascript调用到html中时遇到了问题。我在html的主体中有，但似乎没有什么区别（hoverover就是我所说的javascript）@JJmason首先，请注意，您需要jQuery库来运行它。jQuery是一个非常有用的库，用于遍历DOM和执行CSS更改。你可以去[jQuery]（www.jQuery.com）网站下载，也可以使用谷歌托管的版本-只需在你的

中包含

标签。之后，检查

hover.js

是否实际被加载。使用浏览器的开发人员工具（大多数浏览器都有）执行此操作。您也可以使用开发控制台检查任何其他可能的错误。@JJmason我已经稍微调整了代码。我在JavaScript中添加了注释，这样您就可以准确地看到每一行上发生了什么。我还使用jQuery

ready

方法完成了整个过程，这意味着脚本只在所有HTML元素就绪后运行。这也意味着你可以带上你的

谢谢你的深南，我已经在html文档中添加了jquery，但是可惜什么都没有改变。然而，在检查代码时，我确实收到了这个错误：未定义uncaughtreferenceerror:$