将div设为一个按钮，当我按下它时会改变颜色

Question

我想把一个div变成一个按钮，背景会在我鼠标移动时改变颜色，当我按下它时会改变另一种颜色。我想要做的是按下按钮的行为就像一个链接，当我按下它时，我会转到另一个页面。

你能告诉我这是否很简单。如何改变颜色？如果你有任何例子，我真的很感谢你的帮助。

Answer 1

只要<div>不包含任何互动内容（例如，链接或<button>元素），您就可以执行以下操作：

<a href="http://example.com">
  <div id="awesomediv">Foo</div>
</a>

然后使用CSS伪类:hover和:active来设置<div>元素的样式：

a:hover #awesomediv {
  background-color: green;
}

a:active #awesomediv {
  background-color: blue;
}

当您将鼠标悬停在<div>元素上时，会使其变为绿色，单击时会变为蓝色。