创建一个web按钮，当鼠标悬停后点击，然后再次点击后再次发生变化

我想创建一个翻转图像，点击后变成另一个图像。例如，该按钮没有被点击时，它显示图像1：创建一个web按钮，当鼠标悬停后点击，然后再次点击后再次发生变化

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

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

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

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

来源

2013-08-02 clovisd

您可以使用CSS？ – putvande

你在使用样式表吗？如果您正在创建一个班级并对其应用悬停属性。然后是当前页面的另一个类。 – Fredd

到目前为止你有什么？我什么也没看到。 –

使用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伪类不应该使用，因为它的实现因不同的浏览器而异。

来源

2013-08-02 16:24:35 theftprevention

我如何使用它，将其链接到将在新选项卡中打开的网站链接？到目前为止，感谢：D – clovisd

如果您使用'Open Page'，那么它应该工作。 – theftprevention

这就是我所得到的。 HTTP：//的jsfiddle。net/GB3Gt /我希望按钮是它，而不是角落里的简短文字。 – clovisd

一个样式表添加到您的网页。其中有这样的：

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

将当前应用到当前页面链接，并滚动到其他链接。可能需要一些工作，但多数民众赞成在一般的想法

来源

2013-08-02 16:22:08 Fredd

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

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"); 
}

注意active伪类与某些版本的IE浏览器友好。

来源

2013-08-02 16:22:13

使用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"; 
}

来源

2013-08-02 16:35:14

创建一个web按钮，当鼠标悬停后点击，然后再次点击后再次发生变化

回答

相关问题