如何更改動態創建的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

可以分配一個新的{屬性}一定元件（無論是發生在{IMG}或{跨度}該屬性）。

<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]中的[跨度]元素的新屬性。

然後從你的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'。然後將其附加到文本（'文本'）。

請注意，考慮到您想分開[img]和[span]標籤，這可能有點冒失。

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

希望這有助於。