Faire apparaitre :before :after au passage souris

Kaporal
Les bases HTML/CSS

en gros voila le After et le before aucun des deux ne fonctionne dans mon sens

#grille tbody tr th div:before{
    content: attr(title);

    font-size: large;
    position: absolute;
    display: block;
    text-shadow: 0 0 10px #FFF, 0 0 4px #000;
    width: 60px;
    left: -70px;
    top: -10px;
    opacity: 0; 
}
#grille tbody tr th div:before:hover{

     opacity: 1; 
}

#grille tbody tr th div:after{
    content: '';
    position: absolute;
    left: 0;
    top: -6.4px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10.4px;
    border-color: transparent transparent transparent #fff;
    line-height: 0;
    _border-color: #000000 #000000 #000000 #ffffff;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
    opacity:0; 
}
#grille tbody tr th div:after:hover{

    opacity:1;

}

Lorsque je passe ma souris aucun mes Before et After n'aparaisse pas ...

Sans le Display:none même résultat, aucun :before ou :after ne s'affiche

1 réponse

Kaporal
Auteur
Réponse acceptée 
#grille tbody tr:hover th div:after, #grille tbody tr:hover th div:before,#grille tbody tr:hover th:before,#grille tbody tr:hover td:before{
    opacity:1;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -ms-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
}
#grille tbody tr th div:after, #grille tbody tr th div:before,#grille tbody tr th:before,#grille tbody tr td:before{
    opacity:0;
    -webkit-transition: opacity .8s ease-in;
    -moz-transition: opacity .8s ease-in;
    -ms-transition: opacity .8s ease-in;
    -o-transition: opacity .8s ease-in;
    transition: opacity .8s ease-in;
}