当另一个 div 悬停时切换 div 的内容 [英] Switch content of div when another div gets hovered on

问题描述

我无法让这样的事情发挥作用.我有一系列 DIVS(1 到 8)，当您将鼠标悬停在一个 div 上时，我想用 #replace 的内容(当前设置为隐藏)更改其他 div 的内容<div id="replace" style="visibility:hidden;">Bla Bla Bla</div>

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> ​

这是我目前得到的:

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

推荐答案

jsBin demo

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

为所有 8 个元素添加一个类 .box 并执行以下操作:

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

这篇关于当另一个 div 悬停时切换 div 的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！