jquery - 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");
  }
);