CSS: парить вопрос

Question

я получил эту проблему с моими классами псевдо, у меня есть DropDownList с анкерными taggs в нем, например, так:

<div class="btn-group" id="dropdown-wrapper"> 
    <a href="" data-toggle="dropdown" id="toggle-dropdown">Het 10-stappenplan <i class="fa fa-caret-down"></i></span></a> 
    <ul class="dropdown-menu"> 
     <li><a class="menulink" href="?p=stap1">Stap 1 - Een oriënterend gesprek</a></li> 
     <li><a class="menulink" href="?p=stap2">Stap 2 - De AirAware Quickscan</a></li> 
     <li><a class="menulink" href="?p=stap3">Stap 3 - Uw ambitie, wensen en eisen</a></li> 
     <li><a class="menulink" href="?p=stap4">Stap 4 - Ons Advies</a></li> 
     <li><a class="menulink" href="?p=stap5">Stap 5 - Uw keuze</a></li> 
     <li><a class="menulink" href="?p=stap6">Stap 6 - Het ontwerp en de planning</a></li> 
     <li><a class="menulink" href="?p=stap7">Stap 7 - De realisatie</a></li> 
     <li><a class="menulink" href="?p=stap8">Stap 8 - Het beheer en onderhoud</a></li> 
     <li><a class="menulink" href="?p=stap9">Stap 9 - De periodieke controle</a></li> 
     <li><a class="menulink" href="?p=stap10">Stap 10 - Sale &amp; Leaseback</a></li> 
    </ul> 
</div> 

тогда я получил мой CSS:

.links .dropdown-menu li a.menulink{ 
    padding: 8px 5px 8px 5px; 
    color: white; 
    width: 260px; 
} 

.links .dropdown-menu li a.menulink:hover { 
    animation: textColorfade 2s ease forwards !important; 
    -webkit-animation: textColorfade 2s ease forwards !important; 
    color:black; 
    padding: 8px 5 8px 20px !important; 
    background-color: white !important; 
} 

@-webkit-keyframes textColorfade { 
    from { 
    color: white !important; 
    padding: 8px 5px 8px 10px !important; 
    } 

    to { 
    color: black !important; 
    padding: 8px 5px 8px 10px !important; 
    } 
    } 

по какой-то причине, когда ссылка посещена, она больше не делает анимацию ключевого кадра, я не верю ни когда ее активность, может кто-нибудь объяснить мне, почему и, может быть, я могу исправить эту проблему.

Answer 1

Ссылки не могут иметь несколько псевдоклассы/гласит так

a:visited:hover { 
} 

невозможно.

Я подозреваю, что вы находитесь после перехода не анимация.

Answer 2

Вы пропустили .links класс в HTML:

HTML:

<div class="btn-group links" id="dropdown-wrapper"> <a href="" data-toggle="dropdown" id="toggle-dropdown">Het 10-stappenplan <i class="fa fa-caret-down"></i></span></a> 

    <ul class="dropdown-menu"> 
     <li><a class="menulink" href="?p=stap1">Stap 1 - Een oriënterend gesprek</a> 

     </li> 
     <li><a class="menulink" href="?p=stap2">Stap 2 - De AirAware Quickscan</a> 

     </li> 
     <li><a class="menulink" href="?p=stap3">Stap 3 - Uw ambitie, wensen en eisen</a> 

     </li> 
     <li><a class="menulink" href="?p=stap4">Stap 4 - Ons Advies</a> 

     </li> 
     <li><a class="menulink" href="?p=stap5">Stap 5 - Uw keuze</a> 

     </li> 
     <li><a class="menulink" href="?p=stap6">Stap 6 - Het ontwerp en de planning</a> 

     </li> 
     <li><a class="menulink" href="?p=stap7">Stap 7 - De realisatie</a> 

     </li> 
     <li><a class="menulink" href="?p=stap8">Stap 8 - Het beheer en onderhoud</a> 

     </li> 
     <li><a class="menulink" href="?p=stap9">Stap 9 - De periodieke controle</a> 

     </li> 
     <li><a class="menulink" href="?p=stap10">Stap 10 - Sale &amp; Leaseback</a> 

     </li> 
    </ul> 
</div> 

CSS:

.links .dropdown-menu li a.menulink { //here you missed `.` in links 
    padding: 8px 5px 8px 5px; 
    color: white; 
    width: 260px; 
} 
.links .dropdown-menu li a.menulink:hover { 
    animation: textColorfade 2s ease forwards !important; 
    -webkit-animation: textColorfade 2s ease forwards !important color:black; 
    padding: 8px 5 8px 20px !important; 
    background-color: white !important; 
} 
@-webkit-keyframes textColorfade { 
    from { 
     color: white !important; 
     padding: 8px 5px 8px 10px !important; 
    } 
    to { 
     color: black !important; 
     padding: 8px 5px 8px 10px !important; 
    } 
} 

Демо: http://jsfiddle.net/lotusgodkk/GCu2D/731/

Answer 3

Здравствуйте Здесь работает демо на функциональность парения http://jsfiddle.net/patelmit69/625hv792/1/

HTML

<div class="btn-group links" id="dropdown-wrapper"> <a href="" data-toggle="dropdown" id="toggle-dropdown">Het 10-stappenplan <i class="fa fa-caret-down"></i></span></a> 

<ul class="dropdown-menu"> 
    <li><a class="menulink" href="?p=stap1">Stap 1 - Een oriënterend gesprek</a> 
    </li> 
    <li><a class="menulink" href="?p=stap2">Stap 2 - De AirAware Quickscan</a> 
    </li> 
    <li><a class="menulink" href="?p=stap3">Stap 3 - Uw ambitie, wensen en eisen</a> 
    </li> 
    <li><a class="menulink" href="?p=stap4">Stap 4 - Ons Advies</a> 
    </li> 
    <li><a class="menulink" href="?p=stap5">Stap 5 - Uw keuze</a> 
    </li> 
    <li><a class="menulink" href="?p=stap6">Stap 6 - Het ontwerp en de planning</a> 
    </li> 
    <li><a class="menulink" href="?p=stap7">Stap 7 - De realisatie</a> 
    </li> 
    <li><a class="menulink" href="?p=stap8">Stap 8 - Het beheer en onderhoud</a> 
    </li> 
    <li><a class="menulink" href="?p=stap9">Stap 9 - De periodieke controle</a> 
    </li> 
    <li><a class="menulink" href="?p=stap10">Stap 10 - Sale &amp; Leaseback</a> 
    </li> 
</ul> 

CSS

.links .dropdown-menu li a.menulink { 
    padding: 8px 5px 8px 5px; 
    color: #000; 
    width: 260px; 
} 
.links .dropdown-menu { 
    animation: textColorfade 2s ease forwards; 
    -webkit-animation: textColorfade 2s ease forwards;    
    color:black; 
    display:none; 
} 
.links:hover .dropdown-menu { 
    display:block; 
}