Css 如何覆盖转换延迟？ 工作解决方案：

我正在构建一个下拉式菜单，一些转换被延迟，以给我的列表项提供一个很好的动画效果

但是，此延迟会导致悬停时背景颜色的更改慢于预期

指向JSFIDLE的链接如下：

代码如下：

.profile-list li {
        -webkit-transform-origin: 50% 0%;
        -o-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-transform: perspective(60px) rotateX(-90deg);
        -o-transform: perspective(60px) rotateX(-90deg);
        transform: perspective(60px) rotateX(-90deg);
        -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
    }

    .profile-container:hover .profile-list .fourth {
        transition-delay: 0.6s;
        -o-transition-delay: 0.6s;
        transition-delay: 0.6s;
    } 

    .profile-list li a{
        display: block;
    }


    .profile-list .first {
        -webkit-transition: 0.2s linear 0.8s;
        -o-transition: 0.2s linear 0.8s;
        transition: 0.2s linear 0.8s;
    }

    .profile-list .second {
        -webkit-transition: 0.2s linear 0.6s;
        -o-transition: 0.2s linear 0.6s;
        transition: 0.2s linear 0.6s;
    }

    .profile-list .third {
        -webkit-transition: 0.2s linear 0.4s;
        -o-transition: 0.2s linear 0.4s;
        transition: 0.2s linear 0.4s;
    }

    .profile-list .fourth {
        -webkit-transition: 0.2s linear 0.2s;
        -o-transition: 0.2s linear 0.2s;
        transition: 0.2s linear 0.2s;
    }

    .profile-container:hover .profile-list li {
        -webkit-transform: perspective(350px) rotateX(0deg);
        -o-transform: perspective(350px) rotateX(0deg);
        transform: perspective(350px) rotateX(0deg);
        -webkit-transition: 0.2s linear 0s;
        -o-transition: 0.2s linear 0s;
        transition: 0.2s linear 0s;
    }

    .profile-container:hover .profile-list .second {
        -webkit-transition-delay: 0.2s;
        -o-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }

    .profile-container:hover .profile-list .third {
        -webkit-transition-delay: 0.4s;
        -o-transition-delay: 0.4s;
        transition-delay: 0.4s;
    }




        .profile-list li:hover{
        background-color: #e0e0e0;

    }

我尝试设置转换延迟：.2s！重要的；但那没用

---

*附加问题：当前，轻触手机会打开带有适当动画的菜单。然而，我发现关闭它的唯一方法是点击重新加载页面的链接。如果我在jquery中使用默认行为来停止页面重新加载，它不会关闭菜单。如何关闭移动设备上的菜单？

编辑-答案改进

下面是改进的JSFIDLE

这次的诀窍是将背景更改为锚标记，而不是li。我从上一个li标签中取出填充物，将其添加到锚中，它就像一个符咒：

.profile-list ul li a{
    display: block;
    background-color: #fff;
    transition: background-color 0.5s ease;
    padding: 15px 10px;
    }
 .profile-list ul li a:hover {
    background-color: #E0E0E0;
  }

---

先前的答复：

这个JSFiddle可能会帮助您

  .profile-list li {
        cursor: pointer;
        background: #ffffff;
        border-top: 1px solid #e5e6e6;
        padding: 15px 10px;
        transition: background-color 0.5s ease!important;
    }
  .profile-list li:hover{
        background-color: #e0e0e0; 
    }

这是重要的部分。我添加了一个过渡与一个！特别关注背景色的重要标记。这个重要的可能会被忽略，但在最新的Mozzilla上，我发现这是必要的

---

希望有帮助

关于额外的问题：在所有：hover事件中添加：focus伪是在小型设备上实现鼠标悬停点击更改的最常见方法。这解决了你的问题吗？这是可行的，但它会超越其他变换/转换中的延迟，从而失去延迟的向下翻转效果。我想如果我想把背景颜色分开，我可能必须使用jquery或其他什么不？哦，我现在已经明白你的问题了。“让我试着想出一些办法，我觉得不用jquery也可以解决它。”AlexGray我用一个新的、改进的JSFIDLE编辑了我的答案，看看吧。我希望它能帮上忙。我自己对a标签做了这样的处理，使整个框成为一个可点击的链接，所以我整个时间所要做的就是在“悬停”之前添加“a”。谢谢你帮助我。你的答案是：P现在我只是想找到我的移动解决方案。