悬停更改背景颜色但不更改文本颜色答案

【问题标题】：Hover change background color but not change the text a color悬停更改背景颜色但不更改文本颜色
【发布时间】：2018-05-08 05:46:26
【问题描述】：

这是我的代码，我只能在悬停时更改“popup1_btn”按钮颜色，但不能更改文本颜色。如果使用.popup1_btn a:hover，它只会改变文本的背景颜色和文本颜色，而不是整个按钮的背景颜色。

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;
 }

【问题讨论】：

标签： html css

【解决方案1】：

你应该添加这行代码。

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

【讨论】：

很高兴为您提供帮助，如果对您有用，您能否选择我的答案作为正确答案？

【解决方案2】：

你需要使用

.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;
 }

&lt;div class="popup1_btn"&gt;&lt;a href="http://example.com/"&gt;I'm Interested&lt;/a&gt;&lt;/div&gt;

【讨论】：