添加"能力"以单击DIV中位于其他DIV后面的按钮

Question

我有一个div上的按钮,它位于另一个div后面.第二个div通过使用css重叠第一个div:

position: absolute;

因此该按钮不可点击.有什么方法可以让它像普通按钮一样点击吗？

示例:jsfiddle

HTML:

<div class="stack">
    <div class="background" onclick="alert('background clicked');">
        <button onclick="alert('bg-button clicked');" style="left:65px; top:65px; position: absolute;">This is a background button</button>
        <div class="card">
            <button onclick="alert('card-button clicked');">This is a card button</button>
            <textarea style="left:100px; top:100px; position: absolute;">This is a card textarea</textarea>
        </div>
    </div>
</div>

CSS:

body {
    background-color: blue;
}
.stack {
    width: 320px;
    height: 240px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: white;
    margin-top:-120px;
    margin-left:-160px;
}
.background {
    width: 320px;
    height: 240px;
    background-image:url('http://www.userlogos.org/files/logos/ps1d3r/apple-black-i.png');
    top:0px;
    left:0px;
    position: absolute;
}
.card {
    pointer-events:none;
    width: 320px;
    height: 240px;
    background-image:url('http://2.bp.blogspot.com/-OIHQM4x8l0U/UEiDLQyiTRI/AAAAAAAAHFs/i1a6rkqQ8tQ/s320/floral+swirl.png');
    top:0px;
    left:0px;
    position: absolute;
}

Answer 1

您可以使用pointer-events:none;上.card.这将禁用.carddiv 上的click事件,用户可以单击它后面的按钮.更多信息(MDN).

缺点是它还会禁用textarea和"卡片按钮",因此您必须更改HTML并将textarea和card按钮移出.carddiv,这样它们仍然可以点击

DEMO