Question

我使用jquery对话框，我想使用CSS作为div区域。我使用带有LinkButtons的ListView，我想要一个悬停效果，我尝试使用它，但它不起作用。

aspx :( div area）

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

如何在我的Div区域中使用CSS来获得ListView悬停效果

1 个答案: