Switch content of div when another div gets hovered on

问题

I'm having trouble getting something like this to work. I've got a series of DIVS (1 through 8) and when you hover over one div, I want to literally change the contents of one of the other divs with the contents of #replace (which is current set to hidden) <div id="replace" style="visibility:hidden;">Bla Bla Bla</div>

Here is what I've got so far:

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

Not really having an effect at all - so is my logic bad, how i'm doing it bad, etc...?

回答1:

jsBin demo

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

Add a class .box to all your 8 elements and do:

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

});

回答2:

Like this?

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

Original answer

If I understand your question correctly, you can try this:

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

But I'm not really sure why you are trying to do this. Are you just trying to show and hide some text on mouse over?

回答3:

Don't have a lot of data on what your HTML structure looks like, the purpose of this, etc. But the following is an example structure that would achieve what you're question refers to -- and it's a bit shorter as writing out a specific handling for every div when they all do the same thing makes it a bit unnecessarily long. Code is below, working example also in this 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'));
});

来源：https://stackoverflow.com/questions/12666268/switch-content-of-div-when-another-div-gets-hovered-on

标签

javascript

jquery

hover

mouseover