Question

我正在尝试根据用户悬停的图像来更改文字。我已经对它进行了排序，但现在我正在努力让文本返回到它的默认内容。在您悬停时，文本会更改为所需的文本，但在悬停后，文本会消失吗？请有人告诉我我做错了什么..

我的HTML

     <body>
<div id="container">
<img id="one" src="#" />
<li><img  id="two"  src="#" /></li>
<h2>Some Text</h2>
</div>
    </body>

我的jquery

$(document).ready(function() {
    $('#one').hover(function() {
       $('h2').text('one');
     },function(){
       $('h2').text('');
 });
    $('#two').hover(function() {
       $('h2').text('two'); 
    },function(){
       $('h2').text('');

    });
});

...的jsfiddle http://jsfiddle.net/davidhudson/afdc9jL3/

Answer 1

试试这个：$('h2').text('');这是在鼠标移出事件后清除你的文字。您可以将原始文本存储在某个变量中，并在鼠标移出时进行设置。

 $(document).ready(function() {
    //store original text
    var text=$('h2').text();
    $('#one').hover(function() {
       $('h2').text('one');
     },function(){
       //set original text
       $('h2').text(text);
 });
    $('#two').hover(function() {
       $('h2').text('two'); 
    },function(){
       //set original text
       $('h2').text(text);        
    });
});

<强> DEMO

编辑 - 因为OP可以通过使用逗号分隔的jquery选择器来减少脚本，因为（#one和#two）具有相同的hover事件代码。使用下面的代码

$(document).ready(function() {
    var text=$('h2').text();
    //comma seperated list of selector
    $('#one,#two').hover(function() {
       $('h2').text($(this).attr('id'));
     },function(){
       $('h2').text(text);
 });
});

<强> DEMO with combined selectore

jquery更改图像上的文本悬停多个更改

1 个答案: