Hover change background color but not change the text a color

Question

This is my code, i only can change the "popup1_btn" button color when hover but text color cannot be changes. If using .popup1_btn a:hover , it only change the text's background color and text color not the whole button's background color.

HTML

<div id="myModal" class="modal home-modal">

  <!-- Modal content -->
  <div class="modal-content">
     <div class="get_free_modal">
       <div class="modal_top_logo">
          <img src="http://example.jpg">
       </div>
       <a href="javascript:void(0)" title="Close" class="modal-close close"><img src="http://example.png"></a>
       <div class="modal_inner_contant">
         <div class="third_modalImg">
            <img src="http://example.jpg">
         </div>
      </div>

      <div class="popup1_btn">
         <a href="http://example.com/">I'm Interested</a>
      </div>

    </div>
  </div>

</div>

CSS:

.popup1_btn {
    width: 210px;
    height: 45px;
    font-size: 20px;
    text-transform: uppercase;
    background-color: #d3db2c;
    color: black;
    cursor: pointer;
    margin: 30px auto 0;
    line-height: 45px;
    font-family:"Avant Garde Demi BT";
}

.popup1_btn:hover {
    background-color: black;
    color: #d3db2c;
 }

Answer 1

You need to use

.popup1_btn:hover a {...}

 .popup1_btn { width: 210px; height: 45px; font-size: 20px; text-transform: uppercase; background-color: #d3db2c; color: black; cursor: pointer; margin: 30px auto 0; line-height: 45px; font-family:"Avant Garde Demi BT";} .popup1_btn:hover{ background-color: black; } .popup1_btn:hover a { color: #d3db2c; } 

 <div class="popup1_btn"><a href="http://example.com/">I'm Interested</a></div> 

Answer 2

You should add the line of code.

 .popup1_btn:hover a {
   color: #ffffff;
 }