如何使用悬停效果创建链接按钮？

Question

当我将鼠标光标移动到文本上时，以及当光标进入整个按钮区域时，如何使文本的颜色变为黑色？

＆＃13;

＆＃13;

.button {
  text-align: center;
  font-size: 1.5em;
  margin: 0 auto;
  width: 15%;
  padding: 8px;
  border: 2px solid;
  border-color: #e7dd84;
  background-color: rgba(236, 229, 167, 0.2);
  transition: 0.35s;
}
.button a, active {
  text-decoration: none;
  color: #e7dd84;
}
.button a:hover {
  text-decoration: none;
  color: black;
}
.button:hover {
  color: black;
  background-color: white;
  border-color: white;
  transition: 0.35s;
}

＆＃13;

<div class="button">
  <a href="first.html">Go to site</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你的意思是这样吗？

ViewController

.button
{
	text-align: center;
	font-size: 1.5em;
	margin: 0 auto;
	width: 15%;
	padding: 8px;
	border: 2px solid;
	border-color: #e7dd84;
	background-color: rgba(236,229,167,0.2);
	transition: 0.35s;

}
.button a, active
{
	text-decoration: none;
	color: #e7dd84;

}

.button:hover a
{
	text-decoration: none;
	color: black;

}

.button:hover
{
	color: black;
	background-color: white;
	border-color: white;
	transition: 0.35s;
}

Answer 2

我建议您直接在<div>标记上进行样式设置<a>。

我会使用内联块，因此您不需要指定width，因为内联块具有基于长度的缩小到适合的能力文本。在容器上，您只需要text-align:center水平居中按钮。

将鼠标悬停在按钮的边缘上，您会看到该链接也可用，因为我们直接在其上设置了padding。除非您使用原始演示版，否则您必须将鼠标悬停在文字上才能点击。这种小改进使其更易于访问，更少混淆。

我还将课程button移至<a>，并将container添加到<div>。

<强> jsfiddle

＆＃13;

＆＃13;

.container {
  text-align: center;
}
.button {
  text-decoration: none;
  background-color: rgba(236, 229, 167, 0.2);
  border: 2px solid #e7dd84;
  color: #e7dd84;
  display: inline-block;
  font-size: 1.5em;
  padding: 8px;
  transition: 0.35s;
}
.button:hover {
  text-decoration: none;
  background-color: white;
  border-color: white;
  color: black;
}

＆＃13;

<div class="container">
  <a class="button" href="first.html">Go to site</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

当您将鼠标悬停在按钮上时，您必须对链接进行颜色更改。

目前，当您将鼠标悬停在按钮内的链接上时，您可以更改颜色。

检查更新后的代码段。

.button
{
	text-align: center;
	font-size: 1.5em;
	margin: 0 auto;
	width: 15%;
	padding: 8px;
	border: 2px solid;
	border-color: #e7dd84;
	background-color: rgba(236,229,167,0.2);
	transition: 0.35s;

}
.button a, active
{
	text-decoration: none;
	color: #e7dd84;

}

.button:hover a
{
	text-decoration: none;
	color: black;

}

.button:hover
{
	color: black;
	background-color: white;
	border-color: white;
	transition: 0.35s;
}

<div class="button">
		<a href="first.html">Go to site</a>
	</div>