0

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

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

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

根本没有真正的影响-我的逻辑不好，我做得不好等等……？

4

3 回答 3

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');
      }
  });
  
});
于 2012-10-01T00:56:34.070 回答
0

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>

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

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>

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

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?

于 2012-10-01T00:32:26.850 回答
0

没有太多关于您的 HTML 结构的外观、目的等方面的数据。但以下是一个示例结构，可以实现您的问题所指的内容——而且写出来的时间有点短当每个 div 都做同样的事情时，对每个 div 的特定处理使它有点不必要的长。代码如下，工作示例也在这个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'));
});

​</p>

于 2012-10-01T01:04:33.457 回答