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

Question

本质上我想复制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;
}

因此，当你完全离开菜单时，列表项会等待一秒钟，然后变回蓝色。但当从"一"移动到"二"时，"一"上的悬停状态也会等待一秒钟。

使用同级选择器，我设法在从右向左移动时获得了即时转换。当然，还没有"上一个同级"选择器，所以它不能反过来工作。我想使用一点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');
}
);

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

Answer 1

我认为使用纯CSS可以获得您想要的内容。我已经移除了您的最后一个选择器(使用同级)，并将其推到#2级联位置，并更改选择器以首先查找.menu:hover：

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