单击具有更高z-index的图像下方的内容

Question

我使用jquery和slides plugin创建了一个滑块。我想创建一个效果，看起来滑块是圆形的，所以我将一个带有透明圆形中心的图像放在滑块上方，具有更高的z-index。您可以在此处查看一个有效的示例：http://vitaminjdesign.com/example/examples/Standard/index.html

我遇到的问题是你无法点击滑块内的任何内容，因为“掩码图像”的z索引比其他内容的z索引高。我希望能够点击标题区域内的链接以及整个幻灯片。有没有人对如何解决这个问题有任何好的想法？

我不能给.caption一个比掩码更高的z-index，因为那时你会看到背景通过圆形掩模。但我需要能够在图像蒙版的透明区域内单击。有什么想法吗？

Answer 1

@ JCHASE11我不认为我会向任何人推荐这个......当我看到你的解决方案时，我只需要这样做..它只是......令人窒息......但是......图像映射怎么样？ - http://jsfiddle.net/u9cYZ/

哈......我开始对此有了第二个想法..但它确实可以用图像映射。

结束测试以确保我不仅仅是抛出那些无法工作的想法。http://jsfiddle.net/u9cYZ/3/（在这个例子中，IE获取值img位置：相对;来自某个地方，它将它搞砸了......它也是我晚上睡觉了）

所以解决方案仍然有点......狡猾......但这次只会覆盖想要的区域..

---

这是一个管道磁带的想法..但是，我想你可以在某处放置一个空<a>，当然在掩码的顶部，并将href更改为匹配当前的可见图像。

Answer 2

看来，当链接发生点击时，滑块返回false。所以要特别注意代码window.location.href = myLink.attr('href');

中的下一行

$('#slides #mask').click(function (e) {

    // user click coordinates
    var cursorPosX = e.pageX;
    var cursorPosY = e.pageY;

    $('#slides .caption a').each(function () {
        var myLink = $(this);

        // coordinates of the link at the moment
        var linkPosLeft = myLink.offset().left;
        var linkPosTop = myLink.offset().top;

        // parameters of the link
        var linkWidth = myLink.width() + linkPosLeft;
        var linkHeight = myLink.height() + linkPosTop;

        // compare...
        if ( cursorPosX >= linkPosLeft && cursorPosX <= linkWidth ) {
            if ( cursorPosY >= linkPosTop && cursorPosY <= linkHeight ) {
                window.location.href = myLink.attr('href');
            }
        }
    });

});

Answer 3

不是将一个div用于蒙面图像，而是将其分成6个Div，每个Div都有自己的背景位置。  （见图）

请参阅http://vitaminjdesign.com/example/examples/Standard/index.html了解更新示例。