Plusieurs backgrounds, hover spécifique à chacun
LouisH
-
BassLH Messages postés 2 Statut Membre -
BassLH Messages postés 2 Statut Membre -
Bonjour,
Je suis en train de refaire la page d'accueil de mon site et j'essaye de réaliser quelque chose qui m'a l'air plutôt simple, mais je n'ai jamais manipulé le CSS.
En fait j'aimerais que soient affichées les images A1 et B1 en arrière-plan, et que lorsqu'on survole A1 elle devienne A2, et lorsqu'on survole B1 elle devienne B2.
J'ai vu comment assigner plusieurs backgrounds facilement, mais le soucis est que si je veux faire un hover, il se déclenche sur toutes les images en même temps.
Cela m'a l'air plutôt basique mais pourtant je galère. C'est facile avec 1 seul background, mais là je ne sais pas. Il y a peut-être un rapport avec les DIV mais je ne sais pas vraiment m'en servir.
J'espère trouver de l'aide ici, merci d'avance à quiconque voudra me répondre !
Je suis en train de refaire la page d'accueil de mon site et j'essaye de réaliser quelque chose qui m'a l'air plutôt simple, mais je n'ai jamais manipulé le CSS.
En fait j'aimerais que soient affichées les images A1 et B1 en arrière-plan, et que lorsqu'on survole A1 elle devienne A2, et lorsqu'on survole B1 elle devienne B2.
J'ai vu comment assigner plusieurs backgrounds facilement, mais le soucis est que si je veux faire un hover, il se déclenche sur toutes les images en même temps.
Cela m'a l'air plutôt basique mais pourtant je galère. C'est facile avec 1 seul background, mais là je ne sais pas. Il y a peut-être un rapport avec les DIV mais je ne sais pas vraiment m'en servir.
J'espère trouver de l'aide ici, merci d'avance à quiconque voudra me répondre !
1 réponse
-
salut
dans ton css
#divA1 {
background:url(imageA1);
}
#divB1 {
background:url(imageB1);
}
#divA1:hover {
background:url(imageA2);
}
#divB1:hover {
background:url(imageB2);
}
pour les chemins vers les images voir ici
https://www.alsacreations.com/astuce/lire/78-quelle-est-la-diffrence-entre-les-chemins-relatifs-et-absolus.html
tout sur le css
http://css.mammouthland.net/-
Merci d'avoir répondu !
Je n'y arrive toujours pas, mais je poste mon code pour voir s'il y a un problème dedans.
Le html :
<body>
<div id="A1"></div>
<div id="B1"></div>
</body>
Le CSS :
#divA1 {
background:url(/A1.png) no-repeat center center fixed;
}
#divB1 {
background:url(/B1.png) no-repeat center center fixed;
}
#divA1:hover {
background:url(/A2.png) no-repeat center center fixed;
}
#divB1:hover {
background:url(/B2.png) no-repeat center center fixed;
}
Ca a l'air bon ou pas ? -
-
Okay c'est exact ça marche mieux comme ça ! Après, le problème que j'ai rencontré c'était de mettre les div en full screen sinon ils n'affichaient rien.
Mais je viens de me rendre compte que mon image B1 comporte une partie transparente qui empiète sur la A1 (et vice-versa, ce qui fausse complètement le hover. Du coup ça devient assez compliqué, je pense que je vais me rabattre sur la solution de départ qui est de déclencher le hover sur les deux images en même temps, c'était pas si moche...
Merci encore de m'avoir aidé !
-
