Spectacle :après lors du survol de l'élément parent via CSS

Est-il possible de display:block; la :after pseudo-élément quand j'ai passez la souris sur l'élément parent lui-même?

#myDiv{
   position:relative;
   width:50px;
   height:50px;
   border-style:solid;
   background-color:red;
}
#myDiv:after{
   position:absolute;
   content:"";
   display:none;
   width:50px;
   height:50px;
   border-style:solid;
   background-color:blue;
}

J'ai fatigué:

#myDiv:hover #myDiv:after{
    display:block;
}
#myDiv:hover + #myDiv:after{
    display:block;
}
#myDiv:hover > #myDiv:after{
    display:block;
}

Encore pas de chance, voici un violon.

OriginalL'auteur Ali Bassam | 2013-03-18

  1. 27

    Changer de #myDiv:hover::after

    Vous pouvez utiliser :after ou ::after mais dans les sélecteurs de module (3) il affirme que ce dernier est destiné à être utilisé pour distinguer les pseudo-classes

    La spec dit que c'est très bien pour la compatibilité ascendante pour utiliser : au lieu de ::. C'états de la nouvelle pseudo-éléments de travailler uniquement avec les ::, mais les anciens sont pris en charge avec les deux.
    Merci beaucoup fonctionne très bien pour moi

    OriginalL'auteur user2129623

  2. 4

    Vous essayez de faire référence à la même élément, de sorte que vous n'avez pas besoin de dupliquer le sélecteur d'ID. Pas besoin d'utiliser le sélecteur d'enfant soit, il suffit d'utiliser:

    #myDiv:hover:after {
    display: block;
}

    jsFiddle Démo

    OriginalL'auteur kapa