悬停时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>

图片链接:/image/z5XoU.png

Answer 1

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

将 popup1_btn :hover 更改为 popup1_btn:hover 后，它起作用了。

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

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