div上方的隐藏按钮

Question

My goal is to hide a transparent button above a div element. When a user clicks the button, properties of the underlying div should be changed using code in a C# click event , not client-based code.

• The code below provides an example of changing a div's color properties, but my actual application modifies different properties.
• The button is clickable when positioned beside the div, but not when hidden above it (I tried using z-index).
• I understand that using JQuery or a dedicated CSS class is recommended above overwriting CSS styles, but I am required to use this approach.

Are there any additional CSS properties that could make the hidden button clickable?

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# Code:

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

Answer 1

If I'm understanding your problem correctly, a div isn't considered "clickable" in ASP, so you're trying to get a button to overlap and handle a click event in C#. If this is correct, you could handle the problem this way .

Also, I got it working using purely front end code like so:

 #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> 

*Note: I changed the one id to be consistent capitalization. You may need to change the id if you copy/paste any CSS (Don't mind my OCD)

Answer 2

In this instance, I think you're better off controlling the display logic, including click areas with basic html elements, then using jquery on clicks to fire the event. Within that click you can then do a postback for the button. So the html would be something like this:

<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" />

The button is hidden, so the event can still fire, but the div is the element that is firing the event. If you wanted just the top part of the div to be clickable you can create another div within it that is the click area.