jquery hover element swaping elements_问答_开发者

开发者 https://www.devze.com 2023-03-15 06:16 出处：网络

相关专题：jquery

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. 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>

Is this how you wanted it to work?

I simplified your html and added classes to the Spanish/English pieces of the content.

<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:

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