Html 双向CSS转换

我使用的是基于的带有厂商前缀的css转换，目前它似乎只在Chrome 22+中工作。我正在尝试将鼠标悬停时的按钮（主页、联系人、关于）转换为下拉菜单。我想避免使用javascript，看看是否可以用CSS来完成这一切

如果我将z索引设置为一个较低的数字（-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;
}

看小提琴

问题是它不会消失。如果我将转换更改为同时延迟z索引的更改，则它将淡出，但不会进入（

-webkit转换：不透明度1s缓入淡出，z索引0线性1s

）。对小提琴的修改

从本质上讲，不透明度淡入效果很好，但z索引在一个方向或另一个方向移动得太快。如果我根本不使用z-index，那么当我将鼠标悬停在“Hover Me”按钮下方而不是其上时，它将打开菜单。显示这种情况

有没有一种方法可以使从a点到B点有一个过渡，从B点到a点有另一个过渡？我已经尝试过在

：hover

元素上放置一个单独的转换，但据我所知，它只是覆盖了第一个（好像没有从“不悬停”到“悬停”的转换）

TL；DR：当鼠标悬停在“Hover Me”按钮上（而不仅仅是靠近按钮）时（不使用javascript），有没有办法修改或平滑过渡

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

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。

是的，这正是我想要的。我肯定我试过那样的东西。谢谢