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

【问题标题】：Create a web button that changes when hovering and then again after being clicked创建一个在悬停时更改的 Web 按钮，然后在单击后再次更改
【发布时间】：2013-08-03 05:01:10
【问题描述】：

我想创建一个翻转图像，在单击后会更改为另一个图像。例如，当按钮没有被点击时，它显示图片1：

当悬停在它上面时，它会变成图像 2：

然后，当用户点击按钮后，它会变成图像 3 并保持这种状态，直到页面被刷新：

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

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

【问题讨论】：

您在使用样式表吗？如果您要创建一个类并向其应用悬停属性。然后是当前页面的另一个类。
到目前为止你有什么？我什么都没看到。
使用 jQuery onClick 和 hover 函数。
您的代码尝试在哪里？ <img src="image/b1n.png" alt="Button 1" id="Image2" height="53" width="281"> 不算数。

标签： html css

【解决方案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>

See this demo.

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

【讨论】：

我将如何使用它，将其链接到将在新标签页中打开的网站链接？到目前为止，谢谢，：D
如果你使用<a href="URL" class="button" target="_blank" onClick="this.className = this.className + ' clicked';">Open Page</a>，那么它应该可以工作。
这就是我得到的。 jsfiddle.net/GB3Gt我希望是按钮，而不是角落里的短文本。
那是因为您将div 标签留在了那里。当您只有超链接本身时，它看起来像like this.
但是如上所述，我也希望它是一个图像，就像这里：ouabmc.net/apply/steps.html，所以没有文字和图像的大小。

【解决方案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 版本不友好。

【讨论】：

【解决方案3】：

向您的页面添加样式表。里面有类似的东西：

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

将当前应用到当前页面链接，并将翻转应用到其他链接。可能需要一些工作，但这是一般的想法

【讨论】：

【解决方案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";
 }

【讨论】：