0

我正在尝试使小加圆形按钮具有完全不透明度并且仍然可以点击我的效果目前它正在为整个链接（我想保持这样）采取不透明度，如果我改变 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;
}

这是我创建的 jsfiddle http://jsfiddle.net/W9uju/1/

提前致谢

4

2 回答 2

1

编辑：

抱歉，我已经理解了与您正在寻找的相反的内容，这里有一个您需要的示例：

http://jsfiddle.net/W9uju/9/

使用rgba或hsla作为background color：

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 */

于 2013-09-10T14:10:46.040 回答
1

您可以设置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();
});

演示

在现代浏览器上，您也可以pointer-events:none;设置

演示指针事件

于 2013-09-10T14:18:22.770 回答