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

我试图根据用户悬停在哪个图像来更改文本。我已经完成了排序，但现在我正努力让文本返回到默认内容。在你悬停的那一刻，文字变成了所需的文字，但在悬停后文字消失了？请谁能告诉我什么，我做错了..jquery更改图像上的文本悬停多个更改

我的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/

来源

2014-10-06 Dave Hudson

，函数（）{ $（ 'H2'）文本（ ''）。这里.text（''）是删除文本。因为你已经通过单引号，这意味着空白 – cracker 2014-10-06 12:23:37

是的..在回调盘旋后，你正在做空h2，使文本消失...我不明白你为什么写回调.. – 2014-10-06 12:34:46

试试这个：$('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

EDIT - 如OP可以通过由于两个（#one和#two），具有用于hover事件相同的代码使用逗号分隔jQuery选择减少该脚本。使用以下代码

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

来源

2014-10-06 12:27:03

非常感谢你的帮助。 – 2014-10-06 12:40:39

高兴地帮助你:) – 2014-10-06 12:41:52

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

回答

相关问题