Bonjour à tous !
Je suis en train de créer un petite template de blog avec Ghost et j'ai un problème pour la création de ma barre de partage pour les réseaux sociaux. Cette barre contient 3 div (une fb, twitter et google+) et quand on survol chaque bouton le background de la div doit changer de couleur. Simple non ?
Le problème est que le :hover se déclanche non pas sur ma div qui à la classe icon-facebookmais sur l'élement a contenue dans ma div, ce qui me semble pas normal. Voici la partie du code qui pose probléme :
Le html :
1 2 3 4 5 | <div class="sharepost_phx"> <div class="share_phx icon-facebook"><a target="_blank" href="http://www.facebook.com/sharer.php?u={{url absolute="true"}}"><span class="hidethis_phx">Facebook</span></a></div> <div class="share_phx icon-twitter"><a target="_blank" href="http://twitter.com/share?text={{title}}&url={{url absolute="true"}}"><span class="hidethis_phx">Twitter</span></a></div> <div class="share_phx icon-gplus"><a target="_blank" href="https://plus.google.com/share?url={{url absolute="true"}}"><span class="hidethis_phx">Google+</span></a></div> </div> |
Et le css associé :
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 | /* réseaux sociaux */ .sharepost_phx { margin-top: 20px; width: 100%; min-height: 100px; } .share_article_phx { text-align: center; margin-bottom: 10px; padding: 0; } .share_phx { display: block; margin-right: 15px; float: left; width: 210px; text-align: center; color: white; height: 40px; line-height: 40px; cursor: pointer; border-radius: 5px; } .icon-facebook { background: rgb(66,103,178); } .icon-facebook :hover { background: rgb(54,88,153); } .icon-twitter { background: rgb(27,150,250); } .icon-twitter :hover { background: rgb(12,122,190); } .icon-gplus { background: rgb(233,63,46); } .icon-gplus :hover { background: rgb(203,43,46); } |
De plus quand j'inspecte mon élement avec le navigateur, je ne trouve pas de :hover sur les classes icon-tw/icon-fb et icon-gplus mais je la trouve sur chacun des élèments a qu'elle contient… oO Comment mon hover peut se retrouver là ?
Merci d'avance pour votre aide 
