javascript - 将一个 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>当您将鼠标悬停在元素上时元素变为绿色，单击时变为蓝色。