悬停颜色，不仅仅改变背景

Question

So since I have been trying so hard to make the h4 color change from #333333 to #ffffff while making the background change from #ffffff to #028041

here is a snippet of my code

 .pnl-heading { background: #F2F2F2; border: 1px solid #BDBDBD; box-sizing: border-box; padding: 11px 43px 13px 43px; } .pnl-heading a { font-size: 18px; letter-spacing: 0.03em; text-transform: capitalize; color: #333333; } .pnl-default .pnl-heading:hover, .pnl-default .pnl-heading.active {background:#028041; color: #FFFFFF} 

 <div class="pnl-default"> <div class="pnl-heading active"> <h4 class="panel-title"> <a href="#">Group 1</a> </h4> </div> </div> <div class="pnl-default"> <div class="pnl-heading"> <h4 class="panel-title"> <a href="#">Group 1</a> </h4> </div> </div> 

Answer 1

Try this:

    .pnl-heading:hover a{
          color: fff;
     }

     .pnl-heading:hover {
          background: #028041;
      }

Answer 2

Try this

#pnl-heading {
  background: #F2F2F2;
  border: 1px solid #BDBDBD;
  box-sizing: border-box;
  padding: 11px 43px 13px 43px;
}

#pnl-heading {
  background: #028041;
  border: 1px solid #BDBDBD;
  box-sizing: border-box;
  padding: 11px 43px 13px 43px;
}

#panel-title{
  color: #FFFFFF;
}

#panel-title:hover {
  color: #000000;
}

Hope this helps