在懸停時顯示的對象上的過渡緩解

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> 

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

Answer 1

您不能使用顯示器過渡，但貴麗的變化大小和它的不透明度創建涼爽的過渡：

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