2

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

但它不起作用。有任何想法吗？

4

1 回答 1

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;
}
于 2012-11-19T21:00:32.227 回答