點擊MouseOver上淡出的圖像？

Question

我有一個在MouseOver上淡出的圖像。我想在圖片後面放置一些文字和鏈接，但鏈接不可點擊。我也不能使用pointer-events: none，因爲它會打破褪色效果。

圖像也應該淡入到MouseOut中。

這裏是我的代碼：http://jsfiddle.net/e96nbowc/

HTML

<div class="cover"> 

    <img src="http://i.imgur.com/9Z5ODyg.png"/> 

    <a href="test1">Test 1</a><br/> 
    <a href="test2">Test 2</a><br/> 
    <a href="test3">Test 3</a><br/> 

</div> 

CSS

.cover { 
    position: relative;  
    width: 300px; height: 150px; 
    border: 2px solid #000; 
} 

.cover img { 
    position: absolute; 
    transition: opacity .5s ease; 
} 

.cover img:hover { 
    opacity: 0; 
} 

Answer 1

試試這個：

.cover img { 
    position: absolute; 
    transition:.5s ease; 
} 

.cover:hover img { 
    opacity: 0; 
    visibility:hidden; 
} 

這裏是fiddle

Answer 2

您能不能將文本放在圖像前面，但不透明度爲0，然後在淡出圖像的同時淡入文本，從而給出背後的文字錯覺？