Javascript 如何在图像上获得两个重叠悬停图标，每个图标具有不同的操作？

我已经成功地（）将我的图像链接到一个操作（打开fancybox），并在悬停时显示一个要删除的图标。但这并不是用户的本能——他可能觉得点击图像也会删除

我可以有两个单独的重叠悬停图标吗？一个要展开，一个要删除？到目前为止，我得到的是：

.image-thumb {
position: relative;
width: 150px;
height: 150px;
/* apply background-image url inline on the element since it is part of the content */
background: transparent url("") no-repeat center center;
cursor: pointer;
}
.image-thumb a {
display: none;
position: absolute;
top: 2px;
/* position in bottom right corner, assuming image is 16x16 */
left: 126px;
width: 22px;
height: 22px;
background: red url('/path/to/remove-icon.gif') no-repeat 0 0;
}
.image-thumb:hover a {
display: block;
}

以及HTML：

<div class="image-thumb fancybox" style="display: inline-block; background-image:     url('http://fancyapps.com/fancybox/demo/1_s.jpg');" align="center" data-fancybox-href="http://fancyapps.com/fancybox/demo/1_b.jpg" data-fancybox-group="gallery1" data-fancybox-title="one">
<a></a><strong>description</strong>
</div>
<div class="image-thumb fancybox" style="display: inline-block; background-image: url('http://fancyapps.com/fancybox/demo/2_s.jpg');" align="center" data-fancybox-href="http://fancyapps.com/fancybox/demo/2_b.jpg" data-fancybox-group="gallery1" data-fancybox-title="two">
<a></a><strong>description</strong>
</div>

说明

---

如果你去小提琴，你会看到一个悬停图标会显示在哪里。它是删除图标。我想要的是有第二个图标，可能放在左下角以触发不同的操作，在本例中，启动fancybox

这是解决方案。@Francisco Presencia的扩展版本

---

您需要首先向我们展示您已经尝试过的操作以及您发现的具体问题。我们不是来做你的工作的。我真的不知道如何开始。检查这把小提琴：。这就是我到目前为止得到的。我刚刚用一些代码更新了这个问题。另外，不清楚你在问什么，请你进一步详细说明好吗？好的，添加了一些代码和更多细节。这是你想要的吗？哈哈，我甚至不知道他说的“行动”是什么意思，只是想问问他+1.

$(".fancybox").fancybox();

// testing
$(".image-thumb a.delete").click(function(e){
alert("this item will be removed");
e.stopPropagation();
});
$(".image-thumb a.other").click(function(e){
alert("this item will be fancybox. Hurray");
e.stopPropagation();
})