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

Question

我有一个 ASP.NET 应用程序，我想要一个带有 div 的效果。如果我将鼠标悬停在 div 上，则希望此不透明度为 0.9，如果我将鼠标悬停，则希望不透明度为 0.6。我使用两个 div。一个 div 在另一个 div 中，在此我使用控件。

如果我的鼠标不在 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;    
}