时间戳

首页 > 解决方案 > 悬停时CSS按钮颜色仅更改单词的背景颜色没有整个按钮

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

问题描述

我想让按钮在悬停时更改背景颜色，但我的 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

标签： css

解决方案

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

更改popup1_btn :hover为后popup1_btn:hover，它可以工作。

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

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

推荐阅读