Изменить изображение кнопки «Отправить» при наведении курсора

Question

У меня есть следующее в html-форме с использованием метода Post.

<input type="submit" title="" class="myclass" value="" />

и:

.myclass {
background: url(../images/image1.png)  no-repeat; border: none;
width: 165px;
height: 59px;
}

По сути, мне нужно, чтобы информация о моей форме была опубликована с помощью кнопки image1.png, а при наведении вызывается image2.png. Вы бы порекомендовали CSS или javascript, и каков точный способ сделать это?

Спасибо всем, ответили!

Answer 1

Кнопка отправки:

<input type="image" title="" class="myclass" src="../images/image1.png" />  

CSS:

.myclass:hover {
background: url(../images/image2.png)  no-repeat; border: none;
width: 165px;
height: 59px;
}

Answer 2

Если вы можете использовать jquery, взгляните на это

События / парить

Answer 3

Не знаю почему, но второй ответ не сработал для меня, поэтому я должен был сделать это:

<input type="image" class="myclass" src="../images/image1.png" />

CSS:

.myclass, .myclass:hover {
width: 165px;
height: 59px;
}
.myclass {
background: url(../images/image1.png);
}
.myclass:hover {
background: url(../images/image2.png);
}

Answer 4

CSS-подходы у меня не сработали, но вот этот (vanilla JS):

<input type="image" src="../images/image1.png" onmouseover="this.src='../images/image2.png';" onmouseout="this.src='../images/image1.png';"/>