Html 创建一个web按钮，该按钮在悬停时更改，单击后再次更改

我想创建一个翻滚图像，点击后会更改为另一个图像。例如，未单击按钮时，将显示图像1：

将鼠标悬停在其上方时，它将更改为图像2：

然后，在用户单击按钮后，它将更改为图像3，并保持不变，直到页面刷新：

此外，当用户按下按钮时，它将在新选项卡中打开链接

这就是我到目前为止所做的：

---

在页面中添加样式表。在它里面有这样的东西：

.roll-over { background-image:url('image.png'); }
.roll-over:hover { background-image:url('image2.png'); }
.current { background-image:url('image3.png'); }

将当前链接应用于当前页面链接，并将滚动应用于其他链接。

---

可能需要一些工作，但这是总体思路

向按钮添加一个类，然后执行以下操作： 对于正常状态

button.class{
    background-image: url("images/image.jpg");
}

对于悬停：

button.class:hover{
    background-image: url("images/image2.jpg");
}

对于活动：

button.class:active{
    background-image: url("images/image3.jpg");
}

请注意，活动伪类对某些IE版本不友好。

使用CSS进行悬停：

.button {
    background: #2c82b9;
}
.button:hover {
    background: #359cdd;
}
.button.clicked, .button.clicked:hover {
    background: #aa0000;
}

然后，使用JavaScript进行单击：

<div class="button" alt="Button 1" id="Image2" onClick="this.className = this.className + ' clicked';"></div>

---

不应使用

：active

伪类，因为它的实现在不同的浏览器中有所不同。

使用CSS创建悬停效果

 **CSS**
 #Image1:hover { background-image: url("dir/image2.jpg"); }

然后使用简单的JavaScript代码处理click事件以更改为图3

  **HTML**
 <img src="image/b1n.png" alt="Button 1" id="Image1" height="53" width="281" onclick="changeImage()">

 **JavaScript**
 function changeImage() {
      document.getElementById("Image1").src = "dir/image3.jpg";
 }

**HTML**
**JavaScript**
函数changeImage（）{
document.getElementById（“Image1”）.src=“dir/image3.jpg”；
}

您正在使用样式表吗？如果要创建类并对其应用悬停属性。然后是当前页面的另一个类。到目前为止你有什么？我什么也看不到。使用jQuery

onClick

和

hover

函数。您的代码尝试在哪里<代码>不计算在内。我如何使用它，将其链接到将在新选项卡中打开的网站链接？谢谢你，如果你使用

，那么它应该可以工作。这就是我得到的。我希望按钮是它，而不是角落里的短文本。那是因为你把

div

标记留在那里了。当你只拥有超链接时，它看起来就像上面说的，我也希望它是一个图像，就像这里：ouabmc.net/apply/steps.html，所以没有文本和图像的大小。