jquery懸停元素交換元素

我想用jquery懸停元素交換進出兩個元素 - 西班牙標題和文本與英文標題和文本。我希望西班牙文標題和文本先放在頁面上，然後在將鼠標懸停在標題上時顯示英文標題和文本（並隱藏兩個西班牙文元素）。當你離開標題時，我希望頁面恢復正常，只有西班牙文本/標題 - 沒有英文。我有它的一半工作，但我不能讓西班牙文本保持隱藏英語出現時......任何建議？（它也好像我的所有功能，同時在第一時間不工作...我做錯了什麼？）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>

來源

2011-06-24 Tina

沒錯！那完全是它！謝謝...你真棒！ – 2011-06-24 05:17:01

是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(); 
    }); 
});

來源

2011-06-24 03:24:59

jquery懸停元素交換元素

回答

相關問題