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>

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

然后从你的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
});

以下是您的进一步参考资料：http://jsfiddle.net/k0o1exmf/

希望这有帮助

修改

您也可以分配索引。在这个问题的案例中，我们可以根据最后的索引更改[span]文本的bg颜色（例如＆＃39; image1＆＃39;）

在这种情况下，我们会得到＆＃39; 1＆＃39;从那个图像。然后将其附加到文本中（＆＃39; text＆＃39;）。

请注意，考虑到您想要分隔[img]和[span]标记，这可能会有些麻烦。

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

希望这有帮助。

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

1 个答案: