当另一个div徘徊时切换div的内容

我无法让这样的事情发挥作用。 我有一系列DIVS（1到8），当你将鼠标hover在一个div上时，我希望用#replace（当前设置为隐藏）

Bla Bla Bla

的内容逐字地更改其中一个div的内容

Bla Bla Bla

这是我到目前为止所得到的：

 $('#1').on({ mouseover: function(){ $('#2').replaceWith(jQuery('#replace')); }, mouseleave: function(){ $('#2').replaceWith(jQuery('#2')); }, click: function(){ $('#2').replaceWith(jQuery('#replace')); $('#1').off('mouseleave mouseover'); } }); 

根本没有效果 – 我的逻辑是坏的，我是怎么做的坏等等……？

Answer 1

jsBin演示

 
This is DIV #1 :)  

在所有8个元素中添加一个类.box并执行：

 jQuery(function($){ var replaceText = $('#replace').text(); var memorizeText = ''; $('.box').on({ mouseenter: function(){ memorizeText = $(this).next('.box').text(); // memorize text $(this).next('.box').text(replaceText); }, mouseleave: function(){ $(this).next('.box').text( memorizeText ); // restore memorized text }, click: function(){ $(this).next('.box').text( replaceText ); $(this).off('mouseleave mouseenter'); } }); }); 

Answer 2

像这样？

 
 
Bla bla bla
 
 
 
Some more text
 
I like fish
 
 
 
Hello there
 
Test 123
 
 
 
Test
 
Hi!
  

JS

 $('.page').on({ mouseover: function(){ var nextPage = $(this).next('.page'); nextPage.children('.content').hide(); nextPage.children('.content-alt').show(); }, mouseleave: function(){ var nextPage = $(this).next('.page'); nextPage.children('.content').show(); nextPage.children('.content-alt').hide(); } }); 

---

原始答案

如果我理解你的问题，你可以试试这个：

HTML

 
Page 1
 
Page 2
 
Page 3
 
This is some hidden text 

JS

 $('#page1').on({ mouseover: function(){ $('#page2 .name').hide().after($('#replace')); }, mouseleave: function(){ $('#hidden').hide(); $('#page2 .name').show(); }, click: function(){ $('#hidden').hide(); $('#page2 .name').show(); $('#1').off('mouseleave mouseover'); } }); 

但我不确定你为什么要这样做。 你只是想在鼠标上显示和隐藏一些文字吗？

Answer 3

没有关于你的HTML结构的样子，这个的目的等等的大量数据。但是以下是一个可以实现你所提出的问题的示例结构 – 并且它的写作时间有点短当每个div都做同样的事情时，对每个div的特定处理使得它有点不必要地长。 代码如下，工作示例也在这个jsfiddle中

HTML

 
DIV 1
 
DIV 2
 
DIV 3
 
DIV 4
 
DIV 5
 
DIV 6
 
DIV 7
 
DIV 8
 
REPLACEMENT TEXT 

CSS

 #replacementText { visibility: hidden; }​ 

JQuery的

 $('.replace-me').mouseover(function() { $(this).text($('#replacementText').text()); }); $('.replace-me').mouseout(function() { $(this).text("DIV "+$(this).attr('id')); });