Changement de Présenter l'image du bouton avec hover

J'ai le texte suivant dans un formulaire html à l'aide de la méthode Post.

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

et:

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

En gros, j'ai besoin de mon formulaire de renseignements qui doivent être affichés à l'aide d'un image1.png bouton, et lors de son survol, image2.png serait appelé. Recommanderiez-vous CSS ou de javascript, et quelle serait la manière exacte de le faire?

Merci tout le monde, c'est une réponse!

Vous pouvez utiliser du jquery?
Avec de l'aide, oui, je suppose que je pourrais lui donner un essai, même si je ne suis pas familier avec elle pour le moment!

OriginalL'auteur skarama | 2009-12-17

  1. 8

    Bouton envoyer:

    <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;
}
    C'était ma première tentative, mais il ne semble pas fonctionner lorsque la classe est appelée comme un bouton de soumission. Ou je me trompe?
    Tant pis, ça fonctionne parfaitement!
    c'est une bonne nouvelle.

    OriginalL'auteur Sarfraz

  2. 3

    Si vous pouvez faire usage de jquery, jetez un oeil à cette

    Événements/hover

    Merci je vais lui donner une lecture de référence pour l'avenir!

    OriginalL'auteur Adriaan Stander

  3. 1

    Ne sais pas pourquoi, mais la deuxième réponse n'a pas fonctionné pour moi, si j'avais à le faire:

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

    OriginalL'auteur Kenert

  4. 0

    Le CSS approches n'ont pas bien fonctionné pour moi, mais il n' (vanilla JS):

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

    OriginalL'auteur tsuma534