CSS：悬停问题答案

【问题标题】：CSS :hover issueCSS：悬停问题
【发布时间】：2015-06-05 21:06:18
【问题描述】：

我的伪类遇到了这个问题，我有一个带有锚标记的下拉列表，如下所示：

<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;
   }
   }

由于某种原因，当访问链接时，它不再执行关键帧动画，我相信当它处于活动状态时，任何人都可以解释我为什么以及如何解决这个问题

【问题讨论】：

您在第二条规则的第二行末尾缺少 ;。那，你还没有声明你的关键帧没有供应商前缀。
仍然无法正常工作。修复了；供应商前缀是 -webkit- 对吗？如果是这样，我也解决了这个问题
设置锚点的样式，不要悬停等。所以只需使用类似.dropdown-menu li a {color: #ff0000;}
我做了，只是不是 :active 和 :visited
去掉 .links 前缀它在你发布的代码中不存在

标签： html css css-animations pseudo-class keyframe

【解决方案1】：

链接不能有多个伪类/状态，所以

a:visited:hover {
}

不可能。

我怀疑你所追求的是一个过渡不是动画。

【讨论】：

【解决方案2】：

你错过了 html 中的 .links 类：

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/

【讨论】：

如果你点击一个链接，那么动画就会停止工作

【解决方案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;
}

【讨论】：