CSS按钮颜色仅在悬停时更改单词的背景颜色没有整个按钮

Question

我想在悬停时更改背景颜色按钮，但我的css按钮只会更改单词的背景颜色，而不是悬停时的整个按钮颜色。我的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;}

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

图片链接：https://i.stack.imgur.com/z5XoU.png

Answer 1

似乎CSS中:hover之前的空格导致了这个问题。

将popup1_btn :hover更改为popup1_btn:hover后，就可以了。

这是一个工作片段，整个按钮在悬停时涂成黑色：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;