悬停时显示的对象的过渡缓动答案

【问题标题】：Transition ease on object that shows on hover悬停时显示的对象的过渡缓动
【发布时间】：2014-07-08 10:41:34
【问题描述】：

我正在努力让过渡轻松地解决这个问题，但不能。当转换 css 的目标是在悬停时显示的东西时，知道在哪里放置过渡 css 有点棘手。

代码是：

<div class="language-box">
    <ul>
      <li><a href="#" class="call-cs">English
      <span class="cs">Coming Soon</span></a></li>
      <li><a href="/">Svenska</a></li>
    </ul>
</div>

我正在尝试的 css 是：

span.cs {
    display: none;
}
a.call-cs:hover span.cs {
    display: block;
    position: absolute;
    background: #4E4E4E;
    color: #FFF;
    padding: 2px 10px;
    left: 31px;
    top: -20px;
    border-radius: 20px;
    -o-border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;

    -webkit-transition: background 3s ease;
    -moz-transition: background 3s ease;
    -o-transition: background 3s ease;
    transition: background 3s ease;
}

【问题讨论】：

您无法转换 display 属性 - 您可能需要查看 This Article
你在寻找这样的东西 - jsfiddle.net/G9yyx ?? - @Myj

标签： css hover transitions

【解决方案1】：

你不能使用过渡来显示，但是改变你的 li 的大小和它的不透明度来创建很酷的过渡：

CSS

    span.cs {
    opacity:0;
    height:0;
}
a.call-cs:hover span.cs {
    display: block;
    height:18px;
    position: absolute;
    background: #4E4E4E;
    color: #FFF;
    padding: 2px 10px;
    left: 31px;
    top: -20px;
    opacity:1;
    border-radius: 20px;
    -o-border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;

   transition: all 0.5s ease;

}

li{
    position:relative;

}

DEMO

【讨论】：