如何在jQuery中复制这个CSS同级选择器？

本质上，我想复制

li:hover+li

，但它比这要复杂一点。我正在玩CSS转换，并试图制作一个下拉菜单，它在关闭时会有延迟（为了可用性）。换句话说，当你把鼠标从菜单上移开时，它不会立即消失

我工作正常，但当我从一个顶级项目移动到下一个项目时，上一个菜单保持打开一秒钟。没有下拉列表，只需转换顶级项目。相关CSS：

.menu > li {
  background-color: #4F57AA;
  /* transition out */
  -webkit-transition: background-color .2s ease-in-out 1s;
}
.menu > li:hover {
  background-color: #8F002E;
  /* transition in */
  -webkit-transition: background-color .2s ease-in-out;
}
.menu > li:hover+li {
  -webkit-transition: background-color .2s ease-in-out;
}

因此，当您完全移出菜单时，列表项会等待一秒钟，然后变回蓝色。但当从“1”移动到“2”时，“1”上的悬停状态也会等待一秒钟

使用同级选择器，我成功地在从右向左移动时获得了一个即时转换。当然，还没有“以前的同级”选择器，所以它不会反过来工作。我想使用一点jQuery来触发这些转换，但这就是我遇到的问题。我试过这个：

$('.menu > li').hover(
  function() {
    // instant transition for siblings?
    $(this).siblings().css('-webkit-transition', 'background-color .2s ease-in-out');
  },
  function() {
    // revert to regular transition?
    $(this).siblings().css('-webkit-transition', 'background-color .2s ease-in-out 1s');
  }
);

但它不起作用。有什么想法吗？

我想你可以。我已删除了您的上一个选择器（使用同级），并将其推到#2级联位置，并将选择器更改为查找

。菜单：首先悬停

：

.menu > li {
  background-color: #4F57AA;
  /* transition out */
  -webkit-transition: background-color .2s ease-in-out 1s;
}

.menu:hover > li {
  -webkit-transition: background-color .2s ease-in-out .2s;
}

.menu > li:hover {
  background-color: #8F002E;
  /* transition in */
  -webkit-transition: background-color .2s ease-in-out;
}

---

另外，我尝试使用类来代替它，但没有成功：我仍然不清楚你想要它做什么，因为它还没有做。@developdaly将鼠标放在“三”上，然后向右移动到“四”。我希望“三”的背景立即淡入蓝色，而不是1秒的延迟。但是如果你完全从菜单外的“四”移动，应该会有1秒的延迟。先生，你是个天才。谢谢