按钮A：悬停和背景色

Question

我的按钮有问题。当我希望单击按钮时，通常按钮的颜色为“蓝色”应更改为黑色。

看来我的背景色（黑色）不完整？

//what it currently shows//
"Leonard Shelby is tracking down the man who raped and murdered his wife. 
The difficulty of locating his wife's killer, however, is compounded by 
the fact that he suffers from a rare, untreatable form of short-term 
memory loss. Although he can recall details of life before his accident, 
Leonard cannot remember what happened fifteen minutes ago, where he's 
going, or why."

//What I want it to look like
"Leonard Shelby is tracking down the man who raped and murdered his wife.

The difficulty of locating his wife's killer, however, is compounded by 
the fact that he suffers from a rare, untreatable form of short-term 
memory loss.

Although he can recall details of life before his accident, 
Leonard cannot remember what happened fifteen minutes ago, where he's 
going, or why."


//my code//
var fullTvShowOverview = tvShow.overview;
var tvShowOverView = document.getElementById("tvshow-description");

var trimmedTvShowLength = fullTvShowOverview.indexOf(".");
var trimmedTvShowOverview = fullTvShowOverview.substring(0, 
trimmedTvShowLength,  ".");
trimmedTvShowOverview = trimmedTvShowOverview + ".";
tvShowOverView.textContent = trimmedTvShowOverview;


//my code produces: "Leonard Shelby is tracking down the man who raped and murdered his wife."

.more-information{
	position:absolute;
	height: 33px;
	width: 158px;
	background-color: #005dbe;
  	color: white;
  	line-height: 33px;
  	border:none;
	padding:7px 0 7px 0;
	border-radius:20px;
	text-transform: uppercase;
  	text-align: center;
  	font-weight: bold;
}

.more-information a{
  color: #f2f2f2;
  text-decoration: none;
  display: block;
  height: 100%;
  width: 100%;

}

.more-information a:hover{
  background-color: black;
  color: white;
}

Answer 1

我将大部分CSS从外部div移到了<a>上，现在它的表现与您预期的一样。

.more-information{
  position:absolute;
  height: 33px;
  width: 158px;
}

.more-information a{
  color: #f2f2f2;
  text-decoration: none;
  display: block;
  background-color: #005dbe;
  color: white;
  line-height: 33px;
  border:none;
  padding:7px 0 7px 0;
  border-radius:20px;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
}

.more-information a:hover{
  background-color: black;
  color: white;
}

<div class="more-information"><a href="#">Login</a></div>

Answer 2

尝试一下。

.more-information{
	position:absolute;
	height: 33px;
	width: 158px;
	background-color: #005dbe;
  	color: white;
  	line-height: 33px;
  	border:none;
	padding:7px 0 7px 0;
	border-radius:20px;
	text-transform: uppercase;
  	text-align: center;
  	font-weight: bold;
}

.more-information a{
  color: #f2f2f2;
  text-decoration: none;
  display: block;
  height: 100%;
  width: 100%;

}

.more-information:hover{
  background-color: black;
  color: white;
}

<div class="more-information"><a href="#">Login</a></div>

Answer 3

更改

.more-information a:hover{

到

.more-information:hover{