Multirow hover in repeater table

Question

I have an asp repeater in which I display multiple datarows. It would be great if I could have a hover effect on 3 tablerows (not 3 datarows) at the same time.

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

the result looks like this: *sorry for my drawing skills

the red part is one datarow and is made of 3table rows. With the arrow you can show tablerow 2 and 3 which are the description header and textbox.

Now should on hover over the itemtemplate only these rows light up in gray, red I don't care which color.

Answer 1

Add <tbody> tags around each set of three rows and then add styling to the tbody tags to apply the background color using the :hover psuedo class.