Question

我正在尝试使用jquery悬停元素交换两个元素 - 一个西班牙语标题和带有英文标题和文本的文本。我希望西班牙语标题和文本首先出现在页面上，然后当您将鼠标悬停在标题上时，会显示英文标题和文本（并隐藏两个西班牙元素）。当您离开标题时，我希望页面恢复正常，只有西班牙语文本/标题 - 没有英语。我有一半的工作，但我不能得到西班牙文本保持隐藏英语出现...任何建议？（似乎我的所有功能在第一次同时都不起作用......我做错了什么？）

     <style type="text/css">
    .notshown{display:none;}
    </style>  
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"> 

    $(document).ready(function() {
    $('#hd').hover(function() {
    $($('h3').html('English')).show();
    }, function(){
    $($('h3').html('Spanish')).show();

    $('#hd').hover(function() {
    $('.notshown').show();
    }, function(){
    $('.notshown').hide();
    });
    });
    });
    </script>
    </head>

    <body>
    <h2 id="hd">Hover over this title to switch from Spanish to English</h2>

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

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

Answer 1

this您希望它如何运作？

我简化了你的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>

这是javascript：

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

jquery悬停元素交换元素

1 个答案: