单击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，然后在淡出图像的同时将文本淡入淡出，给出后面文本的错觉？