Question

我正在尝试使小加圆角按钮具有完全不透明度，并且仍然可以点击我的效果目前它正在采用整个链接的不透明度（我希望保持这样），如果我更改z-index，它会在链接顶部，但它不会启动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;
}

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

的jsfiddle

提前致谢

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

Answer 2

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

DEMO

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

DEMO pointer-events

我可以在jquery悬停时使用不同的不透明度制作两个图像

2 个答案: