0

我正在使用基于此演示的供应商前缀 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;
}

请参阅此处的小提琴。

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

本质上，不透明度褪色效果很好，但是 z-index 在一个方向或另一个方向上移动得太快了。如果我根本不使用 z-index，那么当我将鼠标悬停在“悬停我”按钮下方而不是它上面时，它将打开菜单。这是另一个 Fiddle展示了这种情况。

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

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

4

1 回答 1

1

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

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。

于 2012-08-20T18:34:51.087 回答