将鼠标悬停在其他地方的文本替换为另一个 div 中的图像

Question

我已经尝试了十几种不同的方法来做到这一点，不过我只会post我最近的尝试。

基本上，我试图让它在用户将鼠标悬停在页面上的图像上时，单独 div 中的另一个图像被替换为文本。

我有用于替换文本元素的 JS 变量以及要替换的原始图像以将其放回原处。

我最近的尝试是：

function replaceMainPage(x) {
$('#logozone').empty();
$('#logozone').append(x);
}

function hoverCircles(y) {
$(this).hover(replaceMainPage(y), replaceMainPage(mainLogo));
}

我不太了解JS的"this"功能，但也尝试过该功能：

function hoverCircles(y) {
$('#logozone').hover(replaceMainPage(y), replaceMainPage(mainLogo));
}

从这里我尝试调用函数是我的主要 JS 文件，如下所示：

$("#cir1").hover(replaceMainPage(logoReplacements.cakes), replaceMainPage(mainLogo));

以及尝试在 html 中使用 onmouseover 在 img 元素本身上执行此操作。还没有任何效果。

我也对处理此问题的非 JS 方式持开放态度，但我也寻找了那些但找不到任何东西。

Answer 1

这对你有帮助，这里是jsFiddle:

var oldContent = '';
$('.hoverMe').hover(function() {
    oldContent = $('.toReplace').html();
    $('.toReplace').html('xxxxxxxx');
}, function() {
    $('.toReplace').html(oldContent);
});

HTML

<div class="hoverMe">
    HOVER ME
</div>
<div class="toReplace">
    <img src="//cdn2.hubspot.net/hub/360031/hubfs/feature_practicetest.jpg?t=1470774914678&width=365">
</div>

我创建了一个名为 oldContent 的全局变量。 hover在.hoverMediv上的时候，存那个div的旧内容，把div的内容改一下，鼠标移出的时候，把返回旧内容。

更新

根据 OP 评论，我创建了另一个 jsFiddle，您可以在其中设置 .hoverMe

上的任何文本

如果有较长的文本，或者无法存储在数据属性中的文本类型，则将data-id="1"添加到n，并通过ajax检索文本在身份证上。

Answer 2

HTML

<div id="firstImgDiv">
  <div class="text"></div>
  <img src="a.png" onmouseenter="replaceImg('secondImgDiv', 'new Text')">
</div>
<div id="secondImgDiv">
  <div class="text"></div>
  <img src="b.png" onmouseenter="replaceImg('firstImgDiv', 'new Text')">
</div>

JS

function replaceImg(id, text){
  // show all images again
  $('img').show();
  // clear all text
  $('.text').html('');
  // hide target img
  $('#'+id+' > img').hide();
  // set target text
  $('#'+id+' > .text').html(text);
}

将鼠标悬停在其他地方的文本替换为另一个 div 中的图像

Replace image in another div with text upon mouse over elsewhere

javascript

mouseover