[Résolu] Changer le sprite mais pas le background en hover

bonjour,

Je voudrais vous exposer un problème que je rencontre, malgré mes recherches sur tutos et divers sites.
Je souhaiterais faire un bouton avec un sprite + un background en faisant changer le sprite en hover mais pas le background.
Alors si j'utilise la technique des différents tutos un sprite avec les deux stades du bouton ça fonctionne. (voir image)
http://imgh.us/cancel.png

Mais pour mon cas j'essaye une autre technique : j'utilise un sprite avec les différents icônes que je voudrais appliquer aux boutons tout en gardant le même background.

Mon sprite avec les checkmark (vert et gris)

http://imgh.us/sprite.png

mon background utiliser pour les deux stades du boutons
http://imgh.us/bgGray.gif
ce qui donne
http://imgh.us/annuler.png


Et voici mon code

<div class="sprite sprite-novalid"> </div>
<input type="button" id="cancel" value="Cancel" name="button" onclick="" class="btn" title="Cancel [Alt+X]">

Mon code CSS pour le fond du bouton sans les sprites (checkmark)

.btn,input[type="button"],.btn{ 
background-color:#ECF1F4;
background-image:url(http://);
border-color:#ABC3D7;
color:#000000}

.btn, input{
border-radius:12px;
height: 31px;
width: 180px}

Mon CSS pour le sprite

.sprite {
background: url(http://); 
no-repeat;}

et le CSS pour afficher le sprite checkmark (gris)

.sprite-novalid {
width: 19px;
height: 16px;
background-position: -31px 2px;
position: absolute;
display: inline-block;
bottom: 134px;
left: 21px;}

J'ai pas mis le code du hover car rien ne fonctionne.
J'espère avoir été clair.

Merci pour votre aide afin de me mettre sur la piste.

Dimitri
Modifié par fab4_33 (19 Aug 2013 - 14:26)

salut,
il faut utiliser ton sprite d'icones avec ":before" c'est le plus simple que tu puisse faire.

EDIT: pas si c'est sur l'input, du coup j'ai répondu trop vite.
Modifié par Zelalsan (19 Aug 2013 - 11:33)

Merci pour la piste, je fais des essais et je mettrais mes résultats

Grace à Zelalsan et après plusieurs essais, j'ai réussis à faire ce que je désirais

<div class="btn novalid" </div>


<input type="button" id="cancel" value="Cancel" name="button" onclick="" class="box novalid" title="Cancel [Alt+X]">

 input[type="button"] , btn {
		background-color: #EEEEEE;
                background-image: url(http://imgh.us/bgGray.gif);
 		background-position: center bottom;
		border-color:#EEEEEE;
		color: #112277;
		border-radius: 3px;
		font-size: 12px;
		height: 34px;
		width: 105px;
		padding: 0 5px;	
		line-height: 1.6;
		vertical-align: text-bottom;
		border:  1px solid #336699 ;
		font-family: Geneva,Helvetica,Arial,sans-serif;	
		font-weight: normal;}
    
 .btn:before{
	background-image: url(http://imgh.us/ui.png);
        content: " ";
        position: absolute;
        height: 16px;
        width: 16px;
        margin: 8px 0 0 13px;}
    
.novalid:before  {
        background-position: -32px -16px;}

.novalid:hover:before {
        background-position: -32px -32px;}

input[type="button"]:hover, novalid:focus {
    background-color: #FFFFFF;
    background-position: center top;}

En action avec le code


http://jsbin.com/ubuVeLA/6/edit

Voilà si avez d'autres suggestions pour améliorer le code

Merci beaucoup
Modifié par fab4_33 (19 Aug 2013 - 14:25)

Au lieu d'utiliser un <div>, mieux vaut utiliser un <span> et ton code peut être un peu plus simplifié

<span class="btn novalid"><input type="button" id="cancel" value="Cancel" name="button" onclick="" class="box novalid" title="Cancel [Alt+X]" /></span>  

input[type="button"] , .btn {
	display:inline-block;
	vertical-align:text-bottom;
	width:115px;
	height:34px;
	border:none;
	font:300 12px/1.6 Geneva,Helvetica,Arial,sans-serif;
	color: #112277;
	background: #eee url(http://imgh.us/bgGray.gif) center bottom;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.btn {border:1px solid #336699}
.btn:before{
	content: "";
	position: absolute;
	height:16px;
	width:16px;
	margin:8px 0 0 13px;	
	background:url(http://imgh.us/ui.png);
}
.novalid:before {
	background-position: -32px -16px;
}
.novalid:hover:before {
	background-position: -32px -32px;
}
input[type="button"]:hover, novalid:focus {
	background-color: #FFFFFF;
	background-position: center top;
}

merci Zelalsan