Effet au survol qui disparait

Help, mon :hove à disparu !

L’auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

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 :)

“Your manuscript is both good and original. But the part that is good is not original, and the part that is original is not good.” Samuel Johnson

+0 -1

Cette réponse a aidé l’auteur du sujet

Comme ça, je dirais que c'est l'espace que tu mets avant ":hover" qui pose problème.

essaye .icon-facebook:hover plutôt que ça .icon-facebook :hover (pour tous).

Édité par SeeoX

+2 -0
Auteur du sujet

Comme ça, je dirais que c'est l'espace que tu mets avant ":hover" qui pose problème.

C'est pas faux.. oO ! je me demande comment j'ai pu passer à coté de ça ! Merci beaucoup ! =)

“Your manuscript is both good and original. But the part that is good is not original, and the part that is original is not good.” Samuel Johnson

+1 -1
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte