如何在我的 div 区域中使用 CSS 来实现列表视图悬停效果

Question

我使用jquery对话框，我想将CSS用于div区域。我使用带有链接按钮的列表视图，我想要悬停效果，我尝试使用它，但它不起作用。

ASPX：（分区区域）

<div id="dialog" title="Liste">
            <asp:TextBox ID="txtBox" runat="server" ></asp:TextBox>
            <asp:ImageButton ID="imageSearch" runat="server" 
                ImageUrl="~/Theme/Pictures/lupe.jpg" Height="24px" Width="25px" 
                onclick="imageSearch_Click" />
            <asp:Button ID="btnEdit" runat="server" Text="Zu Vertreter hinzufügen" 
                onclick="btnEdit_Click" Width="246px"/>                
                <hr />                 
            <asp:ListView runat="server" ID="myListView">                           
                          <LayoutTemplate>
                                 <table id="UserTable" runat="server" border="0" width="100%" cellpadding="0" cellspacing="0">
                                        <tr style="background-color:#ccdaeb" class="TableClass">
                                            <th align="left" id="th4" runat="server"><asp:LinkButton ID="lnkNachname" runat="server" CssClass="MyLink">Name</asp:LinkButton> </th>
                                            <th align="left" id="th6" runat="server"><asp:LinkButton ID="lnkAbteilung" CssClass="MyLink" runat="server">Abteilung</asp:LinkButton></th>    
                                        </tr>
                                        <tr runat="server" id="ItemPlaceholder"></tr> 
                                 </table>    
                         </LayoutTemplate>
                         <ItemTemplate>       
                                      <tr class="TableClass"> 
                                          <td align="left"><asp:LinkButton  CssClass="MyLink"  CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="lblDisplayName" Text='<%# Eval("DisplayName") %>' runat="server"  /></td>
                                          <td align="left"><asp:LinkButton  CssClass="MyLink"  CommandName="abteilung" CommandArgument='<%# Container.DataItemIndex %>' ID="lblAbteilung" Text='<%# Eval("Abteilung") %>' runat="server"  /></td>
                                      </tr>            
                         </ItemTemplate>
                         <EmptyDataTemplate>
                                           <div><h4>Es wurden keine Einträge gefunden</h4></div>
                         </EmptyDataTemplate>
                         <AlternatingItemTemplate>                
                                      <tr class="TableClass"> 
                                          <td align="left"><asp:LinkButton  CssClass="MyLink"  CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="lblDisplayName" Text='<%# Eval("DisplayName") %>' runat="server"  /></td>
                                          <td align="left"><asp:LinkButton  CssClass="MyLink"  CommandName="abteilung" CommandArgument='<%# Container.DataItemIndex %>' ID="lblAbteilung" Text='<%# Eval("Abteilung") %>' runat="server"  /></td>
                                      </tr>            
                         </AlternatingItemTemplate>    
            </asp:ListView>
</div>

我的 CSS 文件：

#UserTable
{
    background-color:#ccdaeb;        
}
.MyLink 
{
    color:Black;
    text-decoration:none; 
}   
.MyLink:hover
{
    text-decoration:underline; 
} 
#TableClass
{
    background-color:#ccdaeb;
}  
.TableClass:hover
{
    background-color:#E5EDF5;
} 

我做错了什么

Answer 1

#TableClass - 它看起来像错误，应该.TableClass..TableClass也适用于 tr。不知道为什么，但我注意到背景色不适用于 TR。

尝试将 CSS 更改为

.TableClass td
{
    background-color:#ccdaeb;
}  
.TableClass:hover td
{
    background-color:#E5EDF5;
} 

另外，我看到以下代码：id="UserTable" runat="server"

由于该表的runat=服务器ID将被更改，因此下面的css将不起作用

#UserTable
{
    background-color:#ccdaeb;        
}

你可以这样解决它： <table id="UserTable" runat="server" class="UserTable" ...和 css：

 .UserTable
    {
        background-color:#ccdaeb;        
    }