c# - 如何在我的 Div 区域中使用 CSS 实现 ListView 悬停效果

Question

我使用一个 jquery 对话框，我想对 div 区域使用 CSS。我将 ListView 与 LinkBut​​tons 一起使用，我想要悬停效果我尝试使用它，但它不起作用。

aspx: (div 区域)

<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=server id 将被更改，所以下面的 css 将不起作用

#UserTable
{
    background-color:#ccdaeb;        
}

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

 .UserTable
    {
        background-color:#ccdaeb;        
    }