Question

using the following HTML which is dynamically generated:

<div class="widget widget_1">
    <div class="widget_header widget_header_1"></div>
    <div class="widget_sub_header widget_sub_header_1"></div>
    <div class="widget_content widget_content_1"></div>
    <div class="widget_footer widget_footer_1"></div>
<div>

<div class="widget widget_1">
    <div class="widget_header widget_header_1"></div>
    <div class="widget_sub_header widget_sub_header_1"></div>
    <div class="widget_content widget_content_1"></div>
    <div class="widget_footer widget_footer_1"></div>
<div>

<div class="widget widget_6">
    <div class="widget_header widget_header_6"></div>
    <div class="widget_sub_header widget_sub_header_6"></div>
    <div class="widget_content widget_content_6"></div>
    <div class="widget_footer widget_footer_6"></div>
<div>

I have the following script which works:

$("body").on({
    mouseenter: function() {
        console.log( "enter" );
    },
    mouseleave: function() {
        console.log( "leave" );
    }
}, ".widget_content");

My question is, how do I replace the text in whichever .widget_content is hovered over, without affecting the other .widget_content‘s?

Answer 1

As simple as that

$(this).text('updated text');

OR

$(this).html('updated text');