Modify HTML element via Jquery functions

Question

<div id="post-0" class="col-md-8 single-publicacoes">
    <div class="index">
        <div class="index-thumbnail">[IMAGE]</div>
        <div id="index-mascara">[EFEITO]</div>
        <div class="index-title-date">
            <p class="title-date">[TEXTO]</p>
        </div>
   </div>
</div>
<div id="post-1" class="col-md-8 single-publicacoes"> ...

Partial jQuery instruction:

$(".title-date").on('mouseover', function(){

    // função

}).on('mouseleave', function(){

    // função

});

How, through the functions mouseover and mouseleave I can make the paragraph p.title-date modify the background of #index-mascara remembering that he can modify only the current element and not the others?

Answer 1

Change of:

<div id="index-mascara">[EFEITO]</div>

To:

<div class="index-mascara">[EFEITO]</div>

And to get to ". index-mascara" from ". title-date" use:

var mascara = jQuery(this).parent('.index-title-date').prev('.index-mascara');

Now that you have access to the element just apply the actions you want.