当另一个DIV被徘徊在切换DIV的内容(Switch content of div when ano

我遇到了麻烦这样的工作。我有（1至8）一系列的div，当你将鼠标悬停在一个格，我要真正地改变与#replace的内容，其他的div之一的内容（这是当前设置为隐藏） <div id="replace" style="visibility:hidden;">Bla Bla Bla</div>

以下是我到目前为止有：

$('#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演示

<div class="box">This is DIV #1 :) </div>

一类添加.box您所有的8个元素，并做到：

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:

像这样？

<div class="page">
    <div class="content">Bla bla bla</div>
</div>
<div class="page">
    <div class="content">Some more text</div>
    <div class="content-alt" style="display: none;">I like fish</div>
</div>
<div class="page">
    <div class="content">Hello there</div>
    <div class="content-alt" style="display: none;">Test 123</div>
</div>
<div class="page">
    <div class="content">Test</div>
    <div class="content-alt" style="display: none;">Hi!</div>
</div>

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

<div id="page1"><div class="name">Page 1</div></div>
<div id="page2"><div class="name">Page 2</div></div>
<div id="page3"><div class="name">Page 3</div></div>

<div id="hidden" style="display: none">This is some hidden text</div>

$('#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结构是什么样子，这等目的但下面是一个示例结构，将达到什么样的你的问题是指数据的 - 这是为写出一个有点短当他们都做同样的事情，使得它有点不必要的长时间为每一个具体经办核实。代码如下，工作示例也是在这的jsfiddle

HTML

<div id="1" class="replace-me">DIV 1</div>
<div id="2" class="replace-me">DIV 2</div>
<div id="3" class="replace-me">DIV 3</div>
<div id="4" class="replace-me">DIV 4</div>
<div id="5" class="replace-me">DIV 5</div>
<div id="6" class="replace-me">DIV 6</div>
<div id="7" class="replace-me">DIV 7</div>
<div id="8" class="replace-me">DIV 8</div>
<div id="replacementText">REPLACEMENT TEXT</div>

CSS

#replacementText {
    visibility: hidden;
}

JQuery的

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

文章来源: Switch content of div when another div gets hovered on