双向 CSS 过渡

Question

我正在使用基于 this demo 的供应商前缀 css 转换，目前它似乎只在 Chrome 22+ 中工作。我正在尝试将按钮（主页、联系人、关于）变成悬停时的下拉菜单。我想避免使用 javascript，看看我是否可以使用 CSS 完成所有操作。

如果我将 z-index 设置为较低的数字 (-999) 并在悬停时将其更改为较高的数字 (999)，它会淡入，并使用过渡将不透明度从 0 更改为 1。

nav > div div {
    z-index: -999;
    opacity: 0;
    -webkit-transition: opacity 1s ease-in-out;
}
nav > div:hover div {
    z-index: 999;
    opacity: 1;
}

见小提琴here。

问题是它不会淡出。如果我更改过渡以延迟 z-index 的更改，那么它将淡出，但不会在 (-webkit-transition: opacity 1s ease-in-out, z-index 0 linear 1s) 中。对 Fiddle 的修改 here.

基本上发生的事情是不透明度褪色效果很好，但是 z-index 在一个方向或另一个方向上移动得太快了。如果我根本不使用 z-index，那么当我将鼠标悬停在“Hover Me”按钮下方而不是上时，它将打开菜单。 Here's another Fiddle 显示该场景。

有没有办法让从 A 点到 B 点有一个过渡，从 B 点到 A 点有另一个过渡？我已经尝试在 :hover 元素上放置一个单独的过渡，但据我所知，它只是覆盖了第一个（好像没有从“不悬停”到“悬停”的过渡）。

TL;DR：有没有办法修改this、this 或this，以便在悬停在“悬停我”按钮（不只是靠近）上（不使用javascript）时进行平滑过渡？

Answer 1

看看这个Fiddle。不确定它是否符合您的要求，但我更改了以下内容...

CSS

nav > div > div {
  z-index: -999;
  position: absolute;
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out, z-index 0 linear 1s;
  -moz-transition: opacity 1s ease-in-out, z-index 0 linear 1s;
  -ms-transition: opacity 1s ease-in-out, z-index 0 linear 1s;
  -o-transition: opacity 1s ease-in-out, z-index 0 linear 1s;
}
nav > div:hover > div {
  z-index: 999;
  opacity: 1;
  -webkit-transition: opacity 1s ease-in-out, z-index 0 linear 0;
  -moz-transition: opacity 1s ease-in-out, z-index 0 linear 0;
  -ms-transition: opacity 1s ease-in-out, z-index 0 linear 0;
  -o-transition: opacity 1s ease-in-out, z-index 0 linear 0;
}

我也添加了到悬停状态的转换，但延迟为 0。