如何在悬停在其他元素上时更改动态创建的 div？

Question

我有一个带有动态添加图像的文本。我想实现当用户将鼠标悬停在图像上时，文本中的单词会改变背景。

例如，我有 id 为 a1、a2、a3 .... 的图像和 id 为 b1、b2、b3、...的跨度文本 目标 - 当用户悬停 a1 时，b1 跨度文本更改背景等。

我发现这个功能很有用，但我不知道如何使它动态化。

$(function() {
  $('#a').hover(function() {
  $('#b').css('background-color', 'yellow');
  }, function() {
    // on mouseout, reset the background colour
  $('#b').css('background-color', '');
  });
});

例子：

Þeir, sem á <span class="amatic" id="b1">skipinu</span> voru, <span class="amatic" id="b2">sáu</span> ... Voru strendur hennar <span class="amatic" id="b6">háar</span> og sæbrattar

<br>
<img src="images/size_320/lod.jpg" alt="skip" id="a1">
<img src="images/size_320/videt.jpg" alt="sjá" id="a2">  
<img src="images/size_320/vlasy.jpg" alt="hár" id="a6">

Answer 1

您可以为某个元素分配一个新的 {attribute}（将该属性放在 {img} 或 {span} 上）。

<div class="wrapper">
    <img src="https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729513_960_720.jpg" id="a1" />
    <span class="text" data_current_bg="" id="text1"> Text 1 </span>
</div>
<div class="wrapper">
    <img src="https://cdn.pixabay.com/photo/2016/10/03/17/11/cosmos-flower-1712177_960_720.jpg" id="a2" />
    <span class="text" data_current_bg="" id="text2"> Text 2 </span>
</div>
<div class="wrapper">
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRqysRONV6q1elD6x4WJRe_6X5oIswrNXMDByxkNkij8xPWjRECkg" id="a3" />
    <span class="text" data_current_bg="" id="text3"> Text 3 </span>
</div>

在本例中，我们在 [span] 元素中分配了一个名为 [data_current_bg] 的新属性。

然后从你的 JS 中。您可以指定要为每个设置的值。

var oWrapperImages = $('.wrapper img');

oWrapperImages.each(function() {
    // Find every {span} elements next to {img} tags
    // Assuming you set each text's bg color in css
    var oSpanTexts = $(this).parent().find('.text');

    // On loading ths js, Assign the default bg color of each texts
    var sBackgroundColor = oSpanTexts.css('background-color');
    $(this).attr('data_current_bg', sBackgroundColor);
});

然后，您可以在想要检测进程中的“悬停”事件时引用它

oWrapperImages.hover(function() {
   var oSpanTexts = $(this).parent().find('.text');
   var sCurrentBGColor = $(this).attr('data_current_bg');
   oSpanTexts.css('background-color', sCurrentBGColor);
}, function() {
   // rest of code
});

这是一个 jsfiddle 供您进一步参考：http://jsfiddle.net/k0o1exmf/

希望对你有帮助

编辑

您也可以分配索引。在这个问题的情况下，我们可以根据它们最后的索引（例如'image1'）来改变[span]文本的bg颜色

在这种情况下，我们将从该图像中获取“1”。然后将其附加到文本（'text'）。

请注意，考虑到您想将 [img] 和 [span] 标签分开，这可能有点麻烦。

JSFiddle： http://jsfiddle.net/ozd7y8av/

希望这会有所帮助。