我可以用不同的不透明度制作两幅图像吗'；在jquery上悬停

我试图使小加圆形按钮是完全不透明的，仍然可以点击我的效果 目前，它是采取不透明的整个链接（我想保持这样），如果我改变z-指数，它会在链接的顶部，但它不会启动fancybox

.img-hover > a  {
    position:relative;
}
.img-hover {
    display:inline-block;
    position:relative;
    cursor:pointer;
}
.img-hover .hover {
    display:none;
    background:#000;
    border-radius:50px;
    height:35px;
    width:30px;
    font-size:42px;
    font-weight:bold;
    color:#fff;
    padding:10px 15px 20px 20px;
    position:absolute;
    cursor:pointer;
    right:180px;
    top:180px;
}

这是我创建的JSFIDLE

提前感谢

编辑：

对不起，我理解了你所寻找的相反的东西，这里有一个你需要的例子：

---

使用

rgba

或

hsla

作为

背景色

：

rgba(0,0,0,0.5);

rgba(
  0,  // R red
  0,  // G green
  0,  // B blue
  0.5 // A alpha
)

hsla(0,0%,0%,0.5);

hsla(
  0,  // H hue
  0%, // S saturation
  0%, // L lightness
  0.5 // A alpha
)

要提供回退兼容性，您应该编写：

background-color: #000; /* Old browsers (IE8<) */
background-color: hsla(0,0%,0%,0.5); /* Modern browsers */

---

背景色：#000；/*旧浏览器（IE8您可以设置

z-index

，然后使用以下代码段：

$(function() {
    $(".img-hover").hover(
        function() {
            $(this).children("a").fadeTo(200, 0.5).end().children(".hover").show();
        },
        function() {
            $(this).children("a").fadeTo(200, 1).end().children(".hover").hide();
        });
}).on('click',function(e){
    if($(e.target).hasClass('hover'))
        $(this).find('.fancybox')[0].click();
});

在现代浏览器上，您可以设置

指针事件：无；

---

@FezVrasta，但随后单击。hover元素没有按预期打开fancybox FacyBox，只需对其应用正确的链接，我已将其删除。@FezVrasta我的意思是，如果在您的示例中单击

，则不会触发锚定单击，因为事件不会传播到锚定标记，因为它是已单击元素的同级。@FezVrasta，然后你回到我的第二个solution@FezVrasta如果OP对修改HTML代码和IMO不重要，那么ya可以工作，如果可能的话，最好只使用CSS