Question

我想创建一个翻转图像，在点击后更改为另一个图像。例如，如果未单击该按钮，则会显示图像1：

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

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

此外，当用户按下按钮时，它会在新标签中打开链接。

这是我到目前为止所做的： <img src="image/b1n.png" alt="Button 1" id="Image2" height="53" width="281">

Answer 1

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

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 2

使用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>

See this demo.

不应使用:active伪类，因为它的实现在不同的浏览器中有所不同。

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代码处理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";
 }

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

4 个答案: