Selection d'élément+modifications indépendante[Résolu]

sujet clos
Modifié par MrPeppered (16 Jun 2015 - 16:44)

Bonjour,

Il faut soit mettre l'image en background sur une même div et faire ceci :

<div class="Orange">
<div class="img"></div>
</div>

.Orange .img { // @note Ici la div comporte la classe .img
background-image: url(../UneImageParDefaut.jpg);
}

.Orange:hover .img { // @note Si conteneur en hover alors l'image change
background-image: url(../UneImagePourLeHover.jpg);
}

Encore une solution toujours en css, mais moins élégante, avec des balises <img> :

<div class="Orange">
<img/>
<img/>
</div>

.Orange:hover .img,
.Orange img + img { // @note Si hover sur le conteneur, image principale cachée, sinon image de remplacement cachée
display: none;
}
.Orange:hover img + img { // @note La deuxième image apparait si hover sur le conteneur
display: inline;
}

Sinon, passer par javascript pour changer le lien de l'image en position onmouseover.
Modifié par Olivier C (16 Jun 2015 - 16:23)

merci c'est PRESQUE ca
la j'ai effectivement mon image qui change quand je passe la souris sur le bloc MAIS !
j'ai toujours mon image originale AU-DESSUS de ma background image ^^'

et si je l'enlève du html, plus d'image du tout

C'est vraiment le genre de choses à ne pas faire --> éditer ton post initial et écrire "sujet clos".

Y'aura peut être d'autres personnes qui auront ce problème et qui pourrait tomber sur ce sujet...
Surtout si quelqu'un lit et que ça l'intéresse et qu'il souhaite participer pour voir s'il y a un autre moyen de le faire...

Bref ce n'est pas à faire.