Changer le background d'un DIV on Hover sur autre DIV
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 :
Quelqu'un saurai pourquoi cela ne fonctionne pas ?!!
Merci à Tous !
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
-
bonjour, et le html ressemble à quoi ?
-
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.
