jQuery悬停效果

【问题标题】：jQuery hover effectjQuery悬停效果
【发布时间】：2011-06-02 21:44:40
【问题描述】：

我正在尝试产生这种效果http://www.un.org/。这意味着您有不同的链接，悬停时相应的文本会出现在下面。是否可以使用 jQuery 来实现？

感谢您的帮助

【问题讨论】：

【解决方案1】：

你可以单独使用 CSS 来做到这一点

<a href="#">My Link<span>My Hover Text</span></a>

a span { display: none; }
a:hover span { display: inline; }

或者对于更复杂的场景你可以使用jQuery做一个简单的悬停效果：

$("#links li").hover(function() {
    $("#text li:eq(" + $(this).index() + ")").toggle();
});

【讨论】：

【解决方案2】：

您可以使用 jQuery Hover() 事件并更改包含相应文本的 div：

$("#hoverArea").hover(
  function () {
    $("#textDiv").text("New Text");
  },
  function () {
    $("#textDiv").text("Previous Text");
  }
);

【讨论】：