Tell me please, it is necessary to change the color of the parent block when you hover the button inside the block. Namely block 'type'.

.block.plan { background-color: #f1f1f1; padding: 50px 0 50px 0; } .block.plan .items .planBlock { width: -webkit-calc(100% - 40px); width: calc(100% - 40px); margin: 0 auto 30px; text-align: center; } .block.plan .items .planBlock .type { padding: 10px 0; background: #485460; } .block.plan .items .planBlock .type h3 { font-size: 2rem; color: #ffffff; } .block.plan .items .planBlock .price { padding: 10px 0; background: #f8f9fb; } .block.plan .items .planBlock .price p { color: #6b757f; font-size: 1.5rem; } .block.plan .items .planBlock table { width: 100%; background: #ffffff; } .block.plan .items .planBlock table tbody { width: 100%; } .block.plan .items .planBlock table tbody tr { width: 100%; } .block.plan .items .planBlock table tbody tr td { width: 100%; padding: 10px 0; background: #ffffff; border: 1px solid #ecf0f1; color: #8c9299; font-size: 1.125rem; } .block.plan .items .planBlock .btnBlock { width: 100%; padding: 30px 40px; background: #f8f9fb; } .block.plan .items .planBlock .btnBlock a { text-decoration: none; color: #ffffff; font-weight: 600; letter-spacing: 1px; font-size: 1.5rem; background: #788492; padding: 10px 40px; -webkit-border-radius: 5px; border-radius: 5px; } .block.plan .items .planBlock .btnBlock a:hover { background: #49cbcd; } .block.plan .items .planBlock .btnBlock a:hover .planblock .type { background: #49cbcd; } 
 <section class = "block plan"> <div class = "items"> <div class = "planBlock basic"> <div class = "type"> <h3>Basic</h3> </div> <div class = "price"> <p>$5.01/Month</p> </div> <table> <tr><td>Lorem ipsum</td></tr> <tr><td>Dolor sit amet, consect</td></tr> <tr><td>Adipiscing elit</td></tr> <tr><td>Proin commodo turpis</td></tr> <tr><td>lacus pulvinarvel </td></tr> <tr><td>Prnare nisi pretium.</td></tr> </table> <div class = "btnBlock"> <a href = "#" class = "btnBuy">Buy now</a> </div> </div> </div> </section>

    1 answer 1

    Express yourself correctly: this is not the parent element, but a neighbor of the parent element. You can find it with .parent() - searches for the parent element and .siblings() - searches for the neighboring element.

     $('.btnBuy').on('mouseover', function(){ //присвоить цвет при наведении мыши $(this).parent().siblings('.type').css({'background': '#49cbcd'}); }); $('.btnBuy').on('mouseleave', function(){ //убрать цвет при отведении мыши $(this).parent().siblings('.type').css({'background': ''}); });

    Example: https://jsfiddle.net/9Ldyxx6j/