div

Question

我的目标是在div上叠加透明按钮。当用户单击该按钮时，底层div应该更改颜色。我尝试使用z-index，但按钮不可点击。是否有任何我可以尝试的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

如果你不反对使用JQuery，你可以跳过隐藏按钮并使div可点击

$('#myContent').click(function(){
   $('#myContent').css('background-color','red'); 
});

JSFiddle