Plusieurs backgrounds, hover spécifique à chacun

Fermé

LouisH - 23 mars 2014 à 00:14
BassLH Messages postés 2 Date d'inscription dimanche 23 mars 2014 Statut Membre Dernière intervention 1 avril 2014 - 1 avril 2014 à 12:44

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 !

A voir également:

1 réponse

Réponse 1 / 1

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
24 mars 2014 à 01:47

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/

BassLH Messages postés 2 Date d'inscription dimanche 23 mars 2014 Statut Membre Dernière intervention 1 avril 2014
30 mars 2014 à 23:50

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 ?

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
31 mars 2014 à 15:37

Ce n'est pas bon

il faut mettre
#A1 et #A2 et non pas #divA1 et #divA2

Les id des div sont A1 et A2
donc #A1 et #A2

Apres si ca ne marche toujours pas voir le chemin --> url(.......)

BassLH Messages postés 2 Date d'inscription dimanche 23 mars 2014 Statut Membre Dernière intervention 1 avril 2014
1 avril 2014 à 12:44

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é !

Discussions similaires

un périphérique qui n'existe pas a été spécifié

Compter occurences d'un caractère (excel)

un peripherique qui n'existe pas a ete specifié

Votl , le chien

logiciel lecture pour mal-voyant