Question

I have a ASP.NET Application and I want a effect with divs. If I make a mouseover about a div a Want that this opacity is 0.9 and if I make a mousedown I want a opacity of 0.6. I use two divs. The one div is in the other div and in this I use Controls.

if My Mouse is not in the div:

If My Mouse is in the div:

My Code:

<asp:Content ID="Content2" ContentPlaceHolderID="lw_content" runat="server">
    <div class="createuser">

        <div class="create_box">
            <div class="newUser">

        Benutzer Anlegen <br/>
        <br/>
        <table>
            ...
        </table>

        <br/>
        <asp:Button ID="btnAnlegen" runat="server" Text="Benutzer anlegen" 
                    onclick="btnAnlegen_Click" />

             </div>
        </div>

    </div>


</asp:Content>

My CSS:

div.createuser {

    background-image: url(../images/bg_createuser.jpg);

    filter:alpha(opacity=50);
    width: 1000px;
    height: 450px;
    z-index: n;
}

div.create_box {

      width:400px;
  height:350px;
  margin:30px 100px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  }

div.newUser {

    margin:30px 40px;
    font-weight:bold;
    color:#000000;
    font-size: small;opacity:1.0;
  filter:alpha(opacity=100); /* For IE8 and earlier */
}

I have in my div.createuser a image as Background with opacity 0.7

Answer 1

Try this, hope it helps

div.newUser {
   filter:alpha(opacity=50);
   opacity: 0.5;
}

div.newUser:hover {
   filter:alpha(opacity=90);
   opacity: 0.5;
}