Jquery 可点击链接上方的Div

我想在另一个包含链接的div上面创建一个div。 问题是第一个div阻止了对链接的访问。 有没有可能让它呈现在眼前，但却可以访问

（我不想在一个div周围画一个边框，或者类似的东西，我真的想在另一个div上面画一个div）

HTML:

<div class="top">
<a href="#">LINK</a>
</div>
<div class="bottom"></div>

.top { 
height:100px;
width:200px;
position:fixed;
top:10px;
background:yellow; }

.bottom { 
height:50px;
position:fixed;
top:10px;
width:100px;
border:3px solid red; }

---

我相信您正在寻找

指针事件：无

在.bottom的CSS中

试试这个：

.bottom { 
    height:50px;
    position:fixed;
    top:10px;
    width:100px;
    border:3px solid red;
    pointer-events:none;
}

希望有帮助

---

编辑：添加了一把小提琴

我相信您正在查找

指针事件：无

在.bottom的CSS中

试试这个：

.bottom { 
    height:50px;
    position:fixed;
    top:10px;
    width:100px;
    border:3px solid red;
    pointer-events:none;
}

希望有帮助

---

编辑：添加一个小提琴

使用

z-index

将一个放在另一个上面：

.top {
    height:100px;
    width:200px;
    position:fixed;
    top:10px;
    z-index:1;
    background:yellow;
}
.bottom {
    height:50px;
    position:fixed;
    top:10px;
    width:100px;
    border:3px solid red;
    z-index:0;
}

---

使用

z-index

将一个放置在另一个之上：

.top {
    height:100px;
    width:200px;
    position:fixed;
    top:10px;
    z-index:1;
    background:yellow;
}
.bottom {
    height:50px;
    position:fixed;
    top:10px;
    width:100px;
    border:3px solid red;
    z-index:0;
}

---

你可以这样做

.top a{
    position:relative;
    z-index:2;
}

在

.bottom

div中提到

.bottom { 
    z-index:1;
}

---

您可以通过这种方式来完成

.top a{
    position:relative;
    z-index:2;
}

在

.bottom

div中提到

.bottom { 
    z-index:1;
}

---

使用

z-index

---

使用

z-index

---

试试这个，它会把两个div放在一起：

.top { 
    height:100px;
    width:200px;
    top:10px;
    background:yellow;
    display:block;}

.bottom { 
    height:50px;
    top:10px;
    width:100px;
    border:3px solid red;
    display:block;}

---

试试这个，它会把两个div放在一起：

.top { 
    height:100px;
    width:200px;
    top:10px;
    background:yellow;
    display:block;}

.bottom { 
    height:50px;
    top:10px;
    width:100px;
    border:3px solid red;
    display:block;}

---

不知道你为什么这么做

Z-index可以用来将一个div置于另一个div之上，但是有更好的方法来实现您想要的

看到这个了吗

HTML

<div class="bottom">
<a href="#">LINK</a>
</div>

---

不知道你为什么这么做

Z-index可以用来将一个div置于另一个div之上，但是有更好的方法来实现您想要的

看到这个了吗

HTML

<div class="bottom">
<a href="#">LINK</a>
</div>

---

只需使用当前CSS添加：

.bottom{
    ....

    pointer-events:none;
}

---

否则，只有在没有任何z索引限制的情况下，才能为.top类添加/增加z索引值。

只需使用当前CSS添加：

.bottom{
    ....

    pointer-events:none;
}

---

否则，只有在没有任何z索引限制的情况下，才可以为.top类添加/增加z索引值。

我不明白你们为什么在这里使用

位置：固定
。如果您不想要任何边框，并且希望其简单，请使用：

.top { 
    height:100px;
    width:200px;
    background:yellow; 
    position:relative;
}

.bottom { 
    height:50px;
    position:absolute;
    top:10px;
    width:100px;
    border:3px solid red; 
    z-index:-1;
  }

链接到小提琴
我不明白你们为什么在这里使用
position:fixed
。如果您不想要任何边框，并且希望其简单，请使用：

.top { 
    height:100px;
    width:200px;
    background:yellow; 
    position:relative;
}

.bottom { 
    height:50px;
    position:absolute;
    top:10px;
    width:100px;
    border:3px solid red; 
    z-index:-1;
  }

链接到小提琴
请检查。
可能用左手握住右耳，但唯一的解决方案（没有浏览器支持问题）是在对象前面创建不可见的镜像对象，这会使后面的对象无法访问，并让它们将事件传输到原始对象

$(function () {

    $.each($('.back').children(), function () {

        var $behindObject = $(this),
            $behindObjectOffset = $behindObject.position();

        $('<div class="invisible-mirrors">')
            .css({
                width: $behindObject.width(),
                height: $behindObject.height(),
                top: $behindObjectOffset.top,
                left: $behindObjectOffset.left
            })
            .on('click', function () {
                $behindObject.trigger("click");
            })
            .appendTo('.fore')
    });


    //test of click event

    $('.back a').on('click', function () {
        $(this).text($(this).text() + ' got the event : click')
    })


})

$（函数（）{
$.each（$（'.back'）.children（），函数（）{
变量$behindObject=$（此），
$behindObjectOffset=$behindObject.position（）；
$('')
.css({
宽度：$BehinObject.width（），
高度：$behindObject.height（），
top:$behindobjetoffset.top，
左：$behindobjetoffset.left
})
.on（'单击'，函数（）{
$behindObject.trigger（“单击”）；
})
.appendTo（“.fore”）
});
//点击事件测试
$（'.back a'）。在（'click'，函数（）{
$（this）.text（$（this）.text（）+'获取事件：单击'）
})
})
请检查。
可能用左手握住右耳，但唯一的解决方案（没有浏览器支持问题）是在对象前面创建不可见的镜像对象，这会使后面的对象无法访问，并让它们将事件传输到原始对象

$(function () {

    $.each($('.back').children(), function () {

        var $behindObject = $(this),
            $behindObjectOffset = $behindObject.position();

        $('<div class="invisible-mirrors">')
            .css({
                width: $behindObject.width(),
                height: $behindObject.height(),
                top: $behindObjectOffset.top,
                left: $behindObjectOffset.left
            })
            .on('click', function () {
                $behindObject.trigger("click");
            })
            .appendTo('.fore')
    });


    //test of click event

    $('.back a').on('click', function () {
        $(this).text($(this).text() + ' got the event : click')
    })


})

$（函数（）{
$.each（$（'.back'）.children（），函数（）{
变量$behindObject=$（此），
$behindObjectOffset=$behindObject.position（）；
$('')
.css({
宽度：$BehinObject.width（），
高度：$behindObject.height（），
top:$behindobjetoffset.top，
左：$behindobjetoffset.left
})
.on（'单击'，函数（）{
$behindObject.trigger（“单击”）；
})
.appendTo（“.fore”）
});
//点击事件测试
$（'.back a'）。在（'click'，函数（）{
$（this）.text（$（this）.text（）+'获取事件：单击'）
})
})
天哪，这些都不是必需的。不要使用Z索引，也不要使用指针事件

只需重新排列HTML并正确命名CSS选择器：

HTML:
您也不需要同时使用它们
position:fixed。只有集装箱。这也意味着他们不应该是一个，然后是另一个。如果你真的需要它们，你可以像以前一样将它们都固定下来并更改HTML，但我建议不要这样做。
天哪，这些都不是必需的。不要使用Z索引，也不要使用指针事件

只需重新排列HTML并正确命名CSS选择器：

HTML:
您也不需要同时使用它们
position:fixed。只有集装箱。这也意味着他们不应该是一个，然后是另一个。如果你真的需要它们，你可以像以前一样固定它们并更改HTML，但我建议不要这样做。
你的意思是存在但无法访问？为什么要进行位置固定？那么为什么要在希望用户单击的元素上放置一个元素？好的……好的，我来这里不是为了证明任何人是错的，也不是为了证明而争论。如果你那么想要它，那就全是你的了，伙计。：）告诉我我在哪里声称或甚至暗示指针事件是圣杯定律。不要停留在男人身上。我来这里是为了帮助一个有问题的人。如果我的回答让你不满意，我很抱歉，但我保证这不是世界末日。你是说现在但无法访问？为什么你做了位置固定？那么为什么你要在你希望用户单击的元素上放置一个元素？好吧……好吧，我来这里不是为了证明任何人是错的或仅仅为了它而开始争论。如果你真的那么想要，那就太好了