jquery悬停元素交换元素

我试图使用jquery hover元素来交换两个元素——西班牙语标题和文本，以及英语标题和文本。我希望西班牙文标题和文本首先出现在页面上，然后在标题上方悬停时显示英文标题和文本（并隐藏两个西班牙文元素）。当你离开标题时，我希望页面恢复正常，只有西班牙语文本/标题——没有英语。我有一半的工作，但我不能让西班牙文本隐藏时，英文出现…有什么建议？（第一次我的所有功能似乎都不能同时工作……我做错了什么？）

.NotShowed{显示：无；}
$（文档）.ready（函数（）{
$（'#hd'）。悬停（函数（）{
$（$（'h3'）.html（'English'））.show（）；
}，函数（）{
$（$（'h3'）.html（'西班牙语'））.show（）；
$（'#hd'）。悬停（函数（）{
$（'.notshow'）.show（）；
}，函数（）{
$（'.notshow'）.hide（）；
});
});
});
将鼠标悬停在此标题上可从西班牙语切换为英语
西班牙的
“你好！乌诺，多斯，特雷斯”
“嗨！一，二，三”

您希望它如何工作

我简化了html，并在内容的西班牙语/英语部分添加了类

<style type="text/css">
    .notshown{display:none;}
</style>     
<h2 id="hd">Hover over this title to switch from Spanish to English</h2>

<h3 class="spanish">Spanish</h3>
<h3 class="english notshown">English</h3>
<div class="spanish" title="spanish" style="margin-right:400px">
   "Hola! Uno, dos, tres"
</div>

<div class="english notshown" title="english" style="margin-right:400px">
   "Hi! One, Two Three"
</div>

---

是的！完全是这样！谢谢…你太棒了！！

<style type="text/css">
    .notshown{display:none;}
</style>     
<h2 id="hd">Hover over this title to switch from Spanish to English</h2>

<h3 class="spanish">Spanish</h3>
<h3 class="english notshown">English</h3>
<div class="spanish" title="spanish" style="margin-right:400px">
   "Hola! Uno, dos, tres"
</div>

<div class="english notshown" title="english" style="margin-right:400px">
   "Hi! One, Two Three"
</div>

$(document).ready(function() {
    $('#hd').hover(function() {
        $(".english").show();
        $(".spanish").hide();
    }, function(){
        $(".spanish").show();
        $(".english").hide();
    });
});