Изменение содержимого цвета DIV на мышиное

Question

Я искал ответ на этот вопрос, но не могу найти простого решения. Я хочу, чтобы div, h2 и p меняли цвет при падении над родительским div gridInner. каждый из них должен работать самостоятельно. Надеюсь, это можно сделать.

<div class="gridOuter row"> 
        <a href="" class="home-block-button"> 
        <div class="gridInner first col-xs-12 col-sm-4"> 
         <h2>Domain 1</h2> 
         <p>Blurb</p> 
        </div> 
        </a> 
        <a href="" class="home-block-button"> 
         <div class="gridInner col-xs-12 col-sm-4"> 
          <h2>Domain 2</h2> 
          <p>Bkurb 2</p> 
         </div> 
        </a> 
        <a href="" class="home-block-button"> 
         <div class="gridInner last col-xs-12 col-sm-4"> 
          <h2>Domain 3</h2> 
          <p>Blurb 3</p> 
         </div> 
        </a> 
       </div> 

Я пробовал это, но он меняет все. Также h2 не изменяется вообще. Я ценю любую помощь, потому что это сводит меня с ума.

$('.home-block-button').on('mouseover', function() { 
    $(this).closest('div').find('.gridInner').css({'background- color':'#302f52'}); 
    $(this).closest('div').find('.gridInner > h2').css({'color':'#fff'}); 
}); 

Answer 1

Ну это можно сделать с помощью CSS также

a.home-block-button:hover .gridInner{ 
    background-color:#302f52; 
} 
a.home-block-button:hover .gridInner h2{ 
    color:#fff; 
} 

Тем не менее, в вашем случае, если вы хотите использовать JS, то просто написать код, как этот

$("a.home-block-button").hover(
    function() { 
    $(this).find('.gridInner').css({'background- color':'#302f52'}); 
    $(this).find('.gridInner > h2').css({'color':'#fff'}); 
    }, function() { 
    $(this).find('.gridInner').css({'background- color':'initial'}); 
    $(this).find('.gridInner > h2').css({'color':'initial'}); 
    } 
); 

На месте initial вы можете установить нужные значения по мыши.