Question

我的目标是隐藏div元素上方的透明按钮。当用户单击该按钮时，应使用C＃click事件中的代码更改基础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"); }

Answer 1

如果我正确理解你的问题，在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

Answer 2

在这种情况下，我认为您最好控制显示逻辑，包括单击具有基本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，即点击区域。

div上方的隐藏按钮

2 个答案: