div 上方的隐藏按钮

Question

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

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

是否有任何其他 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

在这种情况下，我认为您最好控制显示逻辑，包括具有基本 html 元素的点击区域，然后在点击时使用 jquery 来触发事件。在该单击中，您可以为该按钮执行回发。所以 html 会是这样的：

<script>
    $( "#myContent" ).click(function() {
       __doPostBack('<%= MyHiddenButton.ClientID %>', '')
    });
</script>

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

按钮被隐藏，所以事件仍然可以触发，但 div 是触发事件的元素。如果您只希望 div 的顶部可点击，您可以在其中创建另一个 div 作为点击区域。

Answer 2

如果我对你的问题的理解正确，div 在 ASP 中不被视为 "clickable"，所以你试图让一个按钮重叠并处理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改成了大小写一致。如果你 copy/paste 任何 CSS （别介意我的强迫症）

，你可能需要更改 ID

div 上方的隐藏按钮

Hidden button above div

c#

html

css

button

z-index