创建一个悬停时会更改的web按钮，然后在单击后再次更改

Question

我想创建一个滚动图像，点击后会更改为另一个图像。例如，当按钮没有被点击时，它会显示图像1:

当悬停在其上方时，它将变为图像2:

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

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

到目前为止，我已经做到了：<img src="image/b1n.png" alt="Button 1" id="Image2" height="53" width="281">

Answer 1

使用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伪类，因为它的实现在不同的浏览器中有所不同。

Answer 2

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

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版本不友好。

Answer 3

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

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

将当前链接应用于当前页面链接，并将滚动应用于其他链接。可能需要一些工作，但这是的总体想法

Answer 4

使用CSS创建悬停影响

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

然后使用简单的JavaScript代码处理点击事件以更改为图像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";
 }