悬停CSS上的按钮颜色变化答案

【问题标题】：Button color change on hover CSS悬停CSS上的按钮颜色变化
【发布时间】：2020-09-01 08:04:39
【问题描述】：

该主题存在于 Stackoverflow 上，但我不明白我在 CSS 中的问题。

How can I change a button's color on hover?

我有一个login 按钮，当我希望悬停该按钮时。应出现一个白色背景。

我得到了一个小的背景颜色。

body{

    background-image: url("https://zupimages.net/up/20/20/vreu.jpg");
    height: 550px;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  position: relative;
      
}
 .header-btn-register-login{
	margin-top: 220px;
	margin-left: 538px;
	display: flex;
	font-size: 26px;
	text-transform: uppercase;
	text-align: center;

}


.btn-login {
	background:rgba(0,0,0,0);
  	border: solid 3px;
	color: #FFF;
	padding: 12px 18px;
}

 .btn-login a {
	color: #FFF;
	text-decoration: none;
}



.btn-login a:hover {
	color: black;
	background-color: #FFF;
}

<div class="header-btn-register-login">
    	<div class="btn-login"><a href="#">Login</a></div>
    </div>

【问题讨论】：

标签： css

【解决方案1】：

您应该使用“.btn-login:hover”而不是“.btn-login a:hover”，这样会起作用。

【讨论】：

【解决方案2】：

你需要改变.btn-login而不是.btn-login a的背景颜色

.btn-login:hover {
   background-color: #FFF;
}

【讨论】：

【解决方案3】：

更改以便您悬停按钮而不是 a 标签来更改背景。然后你应该改变 a 标签的颜色。下面的示例 css。

.btn-login:hover {
    background-color: #FFF;
}

.btn-login:hover a {
     color: black;
}

【讨论】：

【解决方案4】：

您将悬停设置在 a 标签上，这就是悬停a 时背景颜色发生变化的原因。您可以进行如下更改：

body{

    background-image: url("https://zupimages.net/up/20/20/vreu.jpg");
    height: 550px;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  position: relative;
      
}
 .header-btn-register-login{
	margin-top: 220px;
	margin-left: 538px;
	display: flex;
	font-size: 26px;
	text-transform: uppercase;
	text-align: center;

}


.btn-login {
	background:rgba(0,0,0,0);
  	border: solid 3px;
	color: #FFF;
	padding: 12px 18px;
}

 .btn-login a {
	color: #FFF;
	text-decoration: none;
}


/* Here are the modified css */
.btn-login:hover {
	color: black;
	background-color: #FFF;
}

.btn-login:hover a {
  color: #000;
}

<div class="header-btn-register-login">
    	<div class="btn-login"><a href="#">Login</a></div>
    </div>

【讨论】：

【解决方案5】：

您将获得按钮内部的悬停效果。这就是为什么只有 a 在悬停时改变颜色。将行更改为：

.btn-login:hover {
   background-color: #ffffff;  ( Your desired color )
}

【讨论】：

【解决方案6】：

这里的问题是您使用的不是按钮而是<a> 元素，因此当您更改<a> 元素的背景时，只有文字的背景会发生变化。要更改整个“伪”按钮的背景，您需要更改包含<a> 元素的<div> 的背景颜色，同时还要更改<a> 元素。

您的代码已根据上述内容进行了相应修改：

body{
    background-image: url("https://zupimages.net/up/20/20/vreu.jpg");
    height: 550px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative; 
}

 .header-btn-register-login{
	margin-top: 220px;
	margin-left: 538px;
	display: flex;
	font-size: 26px;
	text-transform: uppercase;
	text-align: center;

}

.btn-login {
	background:rgba(0,0,0,0);
  	border: solid 3px;
	color: #FFF;
	padding: 12px 18px;
}

 .btn-login a {
	color: #FFF;
	text-decoration: none;
}

.btn-login:hover{
	color: black;
	background-color: #FFF;
}

.btn-login:hover a{
	color: black;
}

<div class="header-btn-register-login">
    	<div class="btn-login"><a href="#">Login</a></div>
    </div>

【讨论】：