中继器中的多行悬停 table

Question

我有一个 asp 转发器，我在其中显示多个数据行。如果我可以同时对 3 个表行（而不是 3 个数据行）产生悬停效果，那就太好了。

<asp:Repeater ID="RepTime" runat="server">                     
    <HeaderTemplate>
        <table class="repTable">
            <tr class="Headertemplate">            
                <th></th>                                   
                <th>Titel</th>                                
            </tr>                           
    </HeaderTemplate>        
    <ItemTemplate>     
            <tr class="Itemtemplate">     
                <td><asp:LinkButton runat="server" ID="btnDesnote" Text='<i class="fa fa-chevron-down fa-lg" aria-hidden="true" ></i>' ForeColor="Black" OnClick="btnDesnote_Click"/></td>                                
                <td><asp:Label runat="server" Text='<%# Eval("Title")%>'/></td>                               
            </tr>
            <tr id="Desnote0" style="display:none;" runat="server" >
                <th colspan="6">Description</th>
            </tr>
            <tr id="Desnote1" style="display:none;" runat="server" >
                <td colspan="6">
                    <asp:TextBox runat="server" ID="tbDescription" Text='<%# Eval("Description")%>' TextMode="MultiLine" Enabled="false" Width="100%"/>
                </td>                               
            </tr>
    </ItemTemplate>  
    <AlternatingItemTemplate>                       
            <tr class="Altertemplate">                                                             
                <td><asp:LinkButton runat="server" ID="btnDesnote" Text='<i class="fa fa-chevron-down fa-lg" aria-hidden="true" ></i>' ForeColor="Black" OnClick="btnDesnote_Click"/></td>                                
                <td><asp:Label runat="server" Text='<%# Eval("Title")%>'/></td>                               
            </tr>
            <tr id="Desnote0" style="display:none;" runat="server" >
                <th colspan="6">Description</th>
            </tr>
            <tr id="Desnote1" style="display:none;" runat="server" >
                <td colspan="6">
                    <asp:TextBox runat="server" ID="tbDescription" Text='<%# Eval("Description")%>' TextMode="MultiLine" Enabled="false" Width="100%"/>
                </td>                               
            </tr> 
    </AlternatingItemTemplate>                     
    <FooterTemplate>
      </table>
    </FooterTemplate>                                  
</asp:Repeater>

结果如下所示： *对不起我的绘画技巧

红色部分是一个数据行，由3个表行组成。使用箭头可以显示表行 2 和 3，它们是描述 header 和文本框。

现在应该将鼠标悬停在 itemtemplate 上，只有这些行以灰色和红色亮起，我不在乎哪种颜色。

Answer 1

在每组三行周围添加标签，然后使用 :hover psuedo class.

向 tbody 标签添加样式以应用背景颜色

中继器中的多行悬停 table

Multirow hover in repeater table

html

css

repeater

html-table