如果我有鼠标悬停，我如何获得div不透明效果

Question

我有一个ASP.NET应用程序，我想要一个div的效果。如果我做一个关于div的鼠标悬停想要这个不透明度是0.9并且如果我做了mousedown我想要0.6的不透明度。我用两个div。一个div在另一个div中，在此我使用Controls。

如果我的鼠标不在div中：

如果我的鼠标在div中：

我的代码：

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

我的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 */
}

我在div.createuser中有一个图像为背景，不透明度为0.7

Answer 1

试试这个，希望有所帮助

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

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

Answer 2

您可以使用背景rgba颜色的不透明度来实现。它适用于所有浏览器：我使用黑色背景来注意示例中的不透明度。也可以使用此元标记，以便在IE

中运行

<meta http-equiv="X-UA-Compatible" content="IE=9" />

div.newUser{
background:rgba(0,0,0,0.5);    
}

 div.newUser:hover{
background:rgba(0,0,0,0.9);    
}

或者您可以使用不透明度来执行此操作：

div.newUser{
opacity: 0.5;    
}
div.newUser:hover{
opacity:0.9;    
}