圖像懸停轉移爲跨度 - CSS

Question

<a href=""><img src=""><span>content</span></a> 

這裏，當我懸停在圖像上時，跨度內容通過使用位置相對於顯示無和位置絕對在span標記中顯示。現在，我的問題是，當我徘徊在圖像上時，我需要過渡效果。爲此，什麼是CSS。請幫幫我。

Answer 1

你不能中轉有display: none;到display: block;所以你需要使用opacity性質的元素...

Fails爲

Passes

Better Demo In Action

.example1 { 
    border: 1px solid #f00; 
    height: 30px; 
} 

.example1 span { 
    opacity: 0; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    transition: all 1s; 
} 

.example1:hover span { 
    opacity: 1; 
} 

Answer 2

一種選擇試圖過渡恩display:none和display:block

是過渡，而不是之間visibility: hidden;和visibility:visible

見this article其中規定：

知名度動畫儘管CSS基本框模型規範說 「設置動畫：沒有」

Answer 3

a.tip2 { 
    position: relative; 
    text-decoration: none; 
} 
a.tip2 span {display: none; 
    opacity: 0; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    transition: all 1s; 
} 
a.tip2:hover span { 
    display: block; 
    position: absolute; 
    padding: .5em; 
    content: attr(title); 
    min-width: 120px; 
    text-align: center; 
    width: 162px; 
    height:auto;  
    top: -247px; 
left: 70px; 
    background: rgba(0,0,0,.8); 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px;  
    color: #fff; 
    font-size: .86em; 
opacity: 1; 
} 
a.tip2:hover span:after { 
    position: absolute; 
    display: block; 
    content: ""; 
    border-color: rgba(0,0,0,.8) transparent transparent transparent; 
    border-style: solid; 
    border-width: 10px; 
    height:0; 
    width:0; 
    position:absolute; 
    bottom: -16px; 
    left:1em; 
} 

這是我的CSS，實際上我忘了說一件事。這是一個使用純CSS的工具提示。