jquery - 单击在 MouseOver 上淡入淡出的图像？

Question

我有一个在鼠标悬停时淡出的图像。我想在图片后面放置一些文本和链接，但这些链接不可点击。我也不能使用 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