问jquery悬停元素交换元素
EN

Stack Overflow用户

提问于 2011-06-24 11:11:56

回答 1查看 136关注 0票数 0

我正在尝试使用jquery hover元素来调入和调出两个元素--一个西班牙语标题和一个英文标题和文本。我希望西班牙的标题和文本是在页面上首先，然后有英文标题和文本显示(并隐藏两个西班牙元素)当你悬停在标题上。当您移出标题时，我希望页面恢复正常，只有西班牙语文本/标题--没有英文。我有它的一半工作，但我不能让西班牙语文本保持隐藏时，英文appears...Any建议？(似乎我的所有函数第一次都不能同时工作……我做错了什么？)

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

jquery

回答 1

Stack Overflow用户

发布于 2011-06-24 11:25:00

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/6462917

复制

相似问题

问jquery悬停元素交换元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery悬停元素交换元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery悬停元素交换元素
EN