Question

我正在努力让过渡更容易在此工作，但不能。知道将转换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>

我正在尝试的是：

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;
}

Answer 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

在悬停时显示的对象上的过渡缓动

1 个答案: