c# - div 上方的隐藏按钮

Question

我的目标是在 div 元素上方隐藏一个透明按钮。当用户点击按钮时，底层 div 的属性应该使用 C# 点击事件中的代码，而不是基于客户端的代码。

• 下面的代码提供了一个更改 div 颜色属性的示例，但我的实际应用程序修改了不同的属性。
• 按钮位于 div 旁边时可点击，但隐藏在其上方时不可点击(我尝试使用 z-index)。
• 我知道在覆盖 CSS 样式之前建议使用 JQuery 或专用 CSS 类，但我必须使用这种方法。

是否有任何额外的 CSS 属性可以使隐藏按钮可点击？

CSS:

#container {
    height:200px;
    width:200px;
    position:relative;
    z-index:auto;
}

#MyHiddenButton {
    float:left;
    height:100px;
    width:200px;
    z-index:2;
    background-color:transparent;
    position: absolute;
    top: 0;
    outline: none;
    border: none;
}

#myContent {
    position:absolute;
    float:left;
    height:200px;
    width:200px;
    background-color:lightslategrey;
    z-index:1;
}

HTML:

<div id="container">
    <div id="myContent" runat="server"></div>
    <asp:Button ID="MyHiddenButton" runat="server" OnClick="MyHiddenButton_Click" />
</div>

C#代码:

protected void MyHiddenButton_Click(object sender, EventArgs e)
{
    myContent.Style.Add("background-color", "red");
}

Answer 1

如果我对您的问题的理解正确，div 在 ASP 中不被视为“可点击”，因此您试图让按钮重叠并在 C# 中处理点击事件。如果这是正确的，您可以解决问题 this way .

此外，我使用纯前端代码让它工作，如下所示:

#container {
    position: relative;
    height: 200px;
    width: 200px;
}

#myHiddenButton {
    position: absolute;
    top: 0;
    height: 200px;
    width: 200px;
    outline: none;
    border: none;
    background-color: transparent;
    z-index: 2;
}

#myContent {
    position: absolute;
    height: 200px;
    width: 200px;
    background-color: lightslategrey;
    z-index: 1;
}

<div id="container">
    <div id="myContent"></div>
    <button id="myHiddenButton" onclick="alert('test');" />
</div>

*注意:我把一个id改成了大小写一致。如果您复制/粘贴任何 CSS，您可能需要更改 ID(不要介意我的强制症)