Question

.hovereffect:hover > .hidden {
  opacity: 1;
  height: 1.5em;
  padding: 0.5em 1em 0.5em 2em;
  border: thin solid white;
  transition-delay: 0s;
}
.hovereffect .hidden {
  opacity: 0;
  clear: both;
  height: 0em;
  padding: 0em;
  border: none;
  transition-property: opacity height padding border;
  transition-duration: 400ms;
  transition-delay: 1s;
}
nav {
  float: right;
  width: 15em;
  margin: 0.1em 0em 0.1em 1em;
  font-variant: small-caps;
}
nav a {
  display: block;
  background-color: #FBF0D4;
  color: #725D29;
  border: thin solid white;
  padding: 0.5em 1em;
  text-decoration: underline;
}
nav a:hover,
nav a:active {
  background-color: #725D29;
  color: #FBF0D4;
}

<nav>
  <a href="/guitar">Menu 1</a>
  <div class="hovereffect">
    <a href="/software">Menu 2</a>
    <a class="hidden" href="/software/practicaluml">Submenu 1</a>
    <a class="hidden" href="/software/trusting_trust">Submenu 2</a>
  </div>
  <a href="/sketches">Menu 3</a>
  <a href="/sketches">Menu 4</a>
</nav>

JSFiddle：http://jsfiddle.net/ke9cc0c7/

我正在尝试显示子菜单列表：将鼠标悬停在菜单项上，否则将隐藏该菜单项。但是折叠列表导致菜单项在用户将鼠标从子菜单移开时改变位置，迫使不知情的用户追逐首选链接。所以我决定添加转换延迟。但由于某种原因，它不适用于边境！（请参阅JSFiddle链接以获取演示。）当用户将鼠标从子菜单移开时，边框将立即重置为0。

我正在制造什么特别的错误？我只是一个学习者。

Answer 1

这是因为border-style属性不是transitionable property。当您从border:none过渡到border: thin solid white时，border-style也会随着border-color和border-width一起更改。 initial value of border-style is none。

将border: 0px solid white设置为初始值会使其正常工作，因为border-style保持不变，即使边框本身被删除，因为宽度为0px并且不会产生任何视觉差异。

＆＃13;

.hovereffect:hover > .hidden {
  opacity: 1;
  height: 1.5em;
  padding: 0.5em 1em 0.5em 2em;
  border: thin solid white;
  transition-delay: 0s;
}
.hovereffect .hidden {
  opacity: 0;
  clear: both;
  height: 0em;
  padding: 0em;
  border: 0px solid white;
  transition-property: opacity height padding border;
  transition-duration: 400ms;
  transition-delay: 1s;
}
nav {
  float: right;
  width: 15em;
  margin: 0.1em 0em 0.1em 1em;
  font-variant: small-caps;
}
nav a {
  display: block;
  background-color: #FBF0D4;
  color: #725D29;
  border: thin solid white;
  padding: 0.5em 1em;
  text-decoration: underline;
}
nav a:hover,
nav a:active {
  background-color: #725D29;
  color: #FBF0D4;
}

＆＃13;

<nav>
  <a href="/guitar">Menu 1</a>
  <div class="hovereffect">
    <a href="/software">Menu 2</a>
    <a class="hidden" href="/software/practicaluml">Submenu 1</a>
    <a class="hidden" href="/software/trusting_trust">Submenu 2</a>
  </div>
  <a href="/sketches">Menu 3</a>
  <a href="/sketches">Menu 4</a>
</nav>

＆＃13;

您可以在spec here中找到动画/可转换属性的完整列表。

过渡延迟不适用于边框

1 个答案: