Changer le background d'un DIV on Hover sur autre DIV

iwebu -  
maka54 Messages postés 721 Statut Membre -
Bonjour,

Je n'arrive pas a faire ce que je souhaites, et pourtant je sais que cela est possible !

Je m'explique, j'ai un DIV principal avec une photo en background que j'aimerais modifier lors du passage sur un autre DIV (bouton).

Voici mon CSS : 


#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;
}

#boutonLondon
{
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;
}


Quelqu'un saurai pourquoi cela ne fonctionne pas ?!!

Merci à Tous !

2 réponses

  1.
    maka54 Messages postés 721 Statut Membre 80
     
    bonjour, et le html ressemble à quoi ?
    0
  2. Ysabe_l Messages postés 11947 Date d'inscription   Statut Contributeur Dernière intervention   277
     
    Bonjour,

    Je ferais ça en javascript personnellement.

    Genre en html si il y a

    <div id="celle_a_changer"></div>
    <div id="bouton_qui_fait_changer"></div>

    En javascript : 

    <script type="text/javascript">
	var monBouton = document.getElementById('bouton_qui_fait_changer');
	monBouton.addEventListener('click', changebackground);
	
	function changebackground {
		document.getElementById('celle_a_changer').backgroundImage='image2.jpg';
	}
		
</script>


    C'est aussi possible si il y a plusieurs boutons et que chacun met une image de background différente, dans ce cas il faudra rajouter une variable.
    0
    1. maka54 Messages postés 721 Statut Membre 80
       
      c'est tout à fait possible de la faire en css mais il faut intervertir les deux div en html 

      <div id="bouton_qui_fait_changer"></div> 
      <div id="celle_a_changer"></div>

      et en css 

      #bouton_qui_fait_changer:hover + #celle_a_changer
      0