如何将类添加到div中的当前活动div

Question

I have few similar blocks with similar content. If I hover on , for and one other in this classes should be added. And for the second block too: if I hover on for and in shold be added the same classes.

Actually I can do unique classes or indentify for each block seperatly but I this this isn't correct and if I want to add I more block I have to change css, html and javascript code - this is uncomfortable.

 var Block1 = $('.point-to-black'); ShopBlock1.mouseover(function(){ $(this).addClass('c-lb-black'); $('.c-lb-text-zone').addClass('c-lb-tz-full'); }); ShopBlock1.mouseout(function(){ $(this).removeClass('c-lb-black'); $('.c-lb-text-zone').removeClass('c-lb-tz-full'); }); 

 .point-to-black { width: 100%; height: 100px; transition: 0.5s; } .c-lb-black{ background-color: rgba(0,0,0,0.6)!important; width: 100%!important; height: 100px!important; transition: 0.5s; } .c-lb-tz-full { transition: 0.3s; margin: 0px 0px 0px 33%!important; padding: 3px 25%!important; font-size: 25px!important; transform: skew(-20deg)!important; background: #c1af25!important; line-height: 33px!important; } .c-lb-text-zone1 { line-height: 33px; letter-spacing: 2px; transition: 0.3s; margin: 0px 0px 0px 50%; padding: 3px 15%; font-size: 25px; transform: skew(-20deg); background: #c1af25; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="c-link-list"> <li> <div class="c-lb-blog"> <div class="point-to-black"> <div class="c-lb-text-zone"> <h1>Blog1</h1> </div> </div> </div> </li> <li> <div class="c-lb-blog"> <div class="point-to-black"> <div class="c-lb-text-zone"> <h1>Blog2</h1> </div> </div> </div> </li> </ul> 

So if I do mouseover on block class adds good just for current block because of pointer but adds for all blocks with class .

Answer 1

$(this).find('.c-lb-text-zone').addClass('c-lb-tz-full');

And

$(this).find('.c-lb-text-zone').removeClass('c-lb-tz-full');

It will affect only the children of the specific div.