Faire apparaitre :before :after au passage souris

Par Kaporal, il y a 10 ans

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, il y a 10 ans
#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; }