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

How can I make the color of the text turn to black not only when I move the mouse cursor to the text, but also when the cursor enters the whole button area?

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

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

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

3 个解决方案

#1

Instead of styling the <div>, I suggest to do it on the <a> tag directly.

我建议不要直接在标签上设置样式,而是直接在标签上设置。

I would use inline block, so that you don't need to specify the width, as inline block has the ability of shrink-to-fit based on length of the text. And on the container all you need is text-align:center to center that button horizontally.

我会使用内联块,因此您不需要指定宽度,因为内联块具有基于文本长度缩小到适合的能力。在容器上你需要的只是文本对齐:中心到水平按钮。

Hover on the edges of the button you'll see the link also becomes available, because we set padding on it directly. Unless your original demo, you'll have to hover on the text to be able to click. This small improvement makes it more accessible, less confusing.

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

I also moved the class button onto the <a>, and add container to the <div>.

我还将类按钮移动到,并将容器添加到

。

jsfiddle

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

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

#2

Do you mean like this?

你的意思是这样的吗?

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

#3

You have to give the color change to the link when you hover on the button.

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

Currently you have given the color to change when hoverd on the link inside the button.

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

Check updated snippet.

检查更新的代码段。

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

#1