jQuery悬停元素交换元素

Question

I am trying to use jquery hover element to swap in and out two elements-- a spanish heading and text with an english heading and text. 我正在尝试使用jquery悬停元素来换入两个元素-西班牙标题和文本以及英语标题和文本。 I want the spanish heading and text to be on the page first, and then have the english heading and text appear (and hide both spanish elements) when you hover over the heading. 我希望西班牙语标题和文本首先出现在页面上，然后将鼠标悬停在标题上，然后显示英语标题和文本（并隐藏两个西班牙语元素）。 When you move off the heading, I want the page to go back to normal with just the spanish text/header-- no english. 当您离开标题时，我希望页面仅显示西班牙语文本/标题即可恢复正常-不用英语。 I have it half working but i can't get the spanish text to stay hidden when the english appears...Any suggestions? 我工作了一半，但是当英语出现时我无法让西班牙语文本保持隐藏状态。有什么建议吗？ (it also seems like all my functions don't work at the same time the first time... what am i doing wrong?) （似乎我的所有功能在第一次都不能同时工作...我在做什么错？）

     <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

Is this how you wanted it to work? 这就是您想要的方式吗？

I simplified your html and added classes to the Spanish/English pieces of the content. 我简化了您的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>

Here is the javascript: 这是JavaScript：

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

jQuery悬停元素交换元素

问题描述

1 个解决方案

解决方案1
0 2011-06-24 03:24:59

jQuery悬停元素交换元素

问题描述

1 个解决方案

解决方案1 0 2011-06-24 03:24:59

解决方案1
0 2011-06-24 03:24:59