jQuery 悬停效果

Question

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

感谢您的帮助

Answer 1

您可以单独使用 CSS

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

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

http://jsfiddle.net/TkVtm/

来完成此操作，或者对于更复杂的场景，您可以可以使用jQuery做一个简单的悬停效果：

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

http://jsfiddle.net/TkVtm/1/

Answer 2

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

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