Discussion :

[reedbedroom]

Bonjour

Je tente désespérément de faire fonctionner quelque chose que j'ai vu sur différents forum mais cela ne marche pas chez moi

Voilà donc ce que j'aimerais faire, j'ai un DIV principal avec une image de fond, lorsque je passe mon curseur sur un bouton (autre DIV), j'aimerais que l'image de fond de mon DIV principal change (avec un petit effet de transition serai un +).

Voici mon code :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
#top-page-contact
{
position: relative;
margin: 0px auto;
background: url(http://www.iwebu.com/hedgeguard_v1/wp-content/themes/hedgeguard/images/fond-contact.png) no-repeat right top;
height: 263px;
width: 1100px;
text-align: center;
padding-top: 280px;
}
 
#boutonParis
{
float: left; 
width: 200px;
height: 21px;
background-color: #f29413;
margin-top: 20px;
text-align: center;
font-family: 'Gotham A', 'Gotham B'; font-weight: 400; font-style: normal;
color: #fff;
font-size: 12.05px;
padding-top: 5px;
cursor: pointer;
}
 
#boutonLondon:hover + #top-page-contact
{
background: url(http://www.iwebu.com/hedgeguard_v1/wp-content/themes/hedgeguard/images/fond-contact.png) no-repeat right top;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<div id="top-page-contact">
   <div id="adresse" style="margin-right: 110px;">
      <div id="texte">Xxxxxxx<br />69 Avenue Victor Hugo<br />75116 PARIS</div>
      <div id="boutonParis">paris@xxxxxx.com</div>
   </div>
   <div id="adresse">
      <div id="texte">Xxxxxxxx®<br />52 Brook Street,<br />Lo ndon W1K 5DS</div>
      <div id="boutonLondon">london@xxxxxxxx.com</div>
   </div>
</div>

Voilà apparemment cela fonctionne pour certaines personne, mais moi il n'y a rien a faire ça ne fonctionne pas (Firefox; Chrome et IE)

Merci pour votre aide.

[Invité]

Bonjour,
l'adjacence ne peut pas fonctionner, puisque "top-page-contact" est le div parent.
=> Savoir comment utiliser les sélecteurs CSS 2.1 et les nouveautés CSS 3

"L'Homme descend du singe, mais ne remonte pas dans l'arbre."
Proverbe Adjacenkhistanais.

Il faut faire ça en JavaScript.
Ou modifier la structure.

N.B. Un id doit être UNIQUE.
Sinon, utiliser une class.

[NoSmoking]

Bonjour,

Je tente désespérément de faire fonctionner quelque chose que j'ai vu sur différents forum mais cela ne marche pas chez moi

pourrait-on savoir où, mais je doute que cela soit en CSS pour les raisons évoquées par Jérôme.

[Invité]

Voici une adaptation full CSS : http://codepen.io/jreaux62/pen/fhkLy

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div id="top-page-contact">
  <div class="adresse" id="adresseParis">
    <p>Xxxxxxx<br />69 Avenue Victor Hugo<br />75116 PARIS</p>
    <span>paris@xxxxxx.com</span>
  </div>
  <div class="adresse" id="adresseLondon">
    <p>Xxxxxxxx®<br />52 Brook Street,<br />London W1K 5DS</p>
    <span>london@xxxxxxxx.com</span>
  </div>
  <div id="image-fond"></div>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
#top-page-contact
{
  position: relative;
  margin: 0px auto;
  height: 263px;
  width: 1100px;
}
 
#image-fond
{
  z-index:0;
  position: absolute; top:0; left:0;
  height: 263px;
  width: 1100px;
  background: url(http://www.iwebu.com/hedgeguard_v1/wp-content/themes/hedgeguard/images/fond-contact.png) no-repeat right top;
}
.adresse
{
  position: absolute; top:0px; 
  z-index:1; /* pour passer au dessus de l'image */
  background-color: #f29413;
  text-align: center; font-family: 'Gotham A', 'Gotham B'; font-weight: 400; font-style: normal; color: #fff; font-size: 0.9em;
  width: 200px;
  padding:0; margin:0;
}
.adresse div
{
  padding:5px; margin:0;
}
.adresse p
{
  padding:10px 5px; margin:0; cursor: pointer;
}
#adresseParis
{
  left:0;
}
#adresseLondon
{
  right:0;
}
.adresse p:hover
{
  background-color: orange;
}
#adresseLondon:hover ~ #image-fond
{
  background: url(http://www.iwebu.com/hedgeguard_v1/wp-content/themes/hedgeguard/images/fond-contact-london.png) no-repeat right top;
}

[NoSmoking]

<div id="image-fond"></div>

c'est quoi cet intrus .

[Invité]

C'est l'homme-sandwich ! (celui qui porte les pancartes de pub) ou la femme !



Plus sérieusement :
=> Règles d'application des styles CSS et gestion des conflits
On y lit notamment :

Attention : en CSS, la notion de frère (et les sélecteurs d'éléments frères associés + et ~) correspond en fait aux frères suivants (following siblings), c'est-à-dire les balises se trouvant au même niveau de l'arborescence (même balise parent) mais après elle dans le code HTML.

Pour que #adresseLondon:hover ~ #image-fond fonctionne, il faut donc qu'ils soient au même niveau ("frères"), et #image-fond placé après.