点击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，然后在淡出图像的同时淡入文本，从而给出背后的文字错觉？