div上方的隐藏按钮答案

【问题标题】：Hidden button above divdiv上方的隐藏按钮
【发布时间】：2015-11-10 04:36:50
【问题描述】：

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

下面的代码提供了一个更改 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");
}

【问题讨论】：

如果你改变颜色服务器端，为什么不让按钮也不可见？
像这样更改背景颜色样式会让您以后遇到困难。内联样式会覆盖 CSS，并与前端常见的关注点分离作斗争。我建议添加一个类并改为在 CSS 中处理颜色。
@BDawg 这简化了更大的应用程序，其中单击按钮 ping 数据库并更改 div 中标签中包含的信息。传递的信息类型决定了颜色。现在，当按钮位于 div 之外时，覆盖 CSS 没有问题。我知道还有其他方法可以处理 CSS 重新设置样式，但在这种情况下需要在 C# 中添加样式。
@CharleyW。听起来这仍然不是必需的（也就是唯一的方法），但这没什么大不了的。你比我更熟悉你的问题。

标签： c# html css button z-index

【解决方案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，即点击区域。

【讨论】：

【解决方案2】：

如果我正确理解您的问题，在 ASP 中 div 不被视为“可点击”，因此您试图让按钮重叠并在 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（不要介意我的强迫症）

【讨论】：