[英]Hover change background color but not change the text a color
這是我的代碼,懸停時我只能更改“ 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;
}
您需要使用
.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>
您應該添加代碼行。
.popup1_btn:hover a {
color: #ffffff;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.