Question

我正在使用基于this demo的供应商前缀css过渡，目前似乎只在Chrome 22+中运行。我正在尝试将按钮（Home，Contact，About）转换为悬停下拉菜单。我想避免使用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）中淡出。对小提琴的修改here。

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

有没有办法从A点到B点进行一次转换，从B点到A点有另一种转换？我已经在:hover元素上进行了单独的转换，但据我所知，它只是覆盖了第一个（就好像没有从“不悬停”转换到“悬停”）。 / p>

TL; DR：有没有办法修改this，this或this，以便在悬停在（不仅仅是在“Hover Me”按钮上时进行平滑过渡（不使用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。

双向CSS转换

1 个答案: