jQuery 在鼠标悬停时交换 div

Question

有人知道一个简单的 jquery 脚本，可以在悬停时交换/更改 div 吗？

EG

我有 3 个 li 元素:

<ul>
   <li><a href="#" id="link1">Link1</a></li>
   <li><a href="#" id="link2">Link2</a></li>
   <li><a href="#" id="link3">Link3</a></li>
</ul>

并且有 3 个 DIV 容器:

<div id="container1">content 1</div>
<div id="container2">content 2</div>
<div id="container3">content 3</div>

所以，我希望当页面打开时 DIV #container1 可见，#container2、#container3 隐藏。然后，如果用户“悬停”link2 或 link3 #container1 被隐藏，而 #container2 或 #container3 将变得可见。我希望你能理解我的观点。

我创建了一个fiddle如果有人愿意提供帮助。

Answer 1

$('#container2, #container3').hide();
$('li a').mouseover(function(){
    var idx= $(this).attr('id').substr(-1);
    $('#container1, #container2, #container3').hide();
    $('#container'+idx).show();
});

<强> jsFiddle example