How do I add a hover to this css class for a tr?


Tags: html,css,asp.net,table

Problem :

Ho do I add a hover to this class in my css file? I can add a hover effect when I do not specify this class by using onmouseover, however I want to use both this css class and the hover.

tr.TableData td
{  
    background-color:white;  
    color:Black;  
    font-family:'Exo', sans-serif;  
    font-size: 16px;  
    height:60px;
    border-bottom:1pt solid #E2E2E8;
    padding: 0px 15px 0px 15px;  
    margin:0px; 
    width:199px;
    font-weight:400;
}

This is my table. It is an ItemTemplate in a listview:

<ItemTemplate>
    <tr class="TableData">
        <td style="width: 30%;">
            <table>
                <tr class="NoBorder">
                    <td style="width: 20%;">
                        <img src='<%#Eval("standard_image") %>' alt="" width="80" onerror="this.src='Content/Images/placeholder.png';" />
                    </td>
                    <td>
                        <asp:Label ID="lblProductLine" runat="server" Text='<%#Eval("product_line")%>' />
                    </td>
                </tr>
            </table>
        </td>
        <td style="width: 24%;">
            <asp:Label ID="lblModelNum" runat="server" Text='<%#Eval("model")%>' />
        </td>
        <td style="width: 16%;">
            <asp:Label ID="lblSerialNum" runat="server" Text='<%#Eval("serial_number")%>' />
        </td>
        <td style="width: 12%; text-align:center;">
            <asp:LinkButton runat="server" ID="SelectCategoryButton" CommandName="Select">
                <img id="Img1" runat="server" src='<%#Eval("display_status") %>' alt="" width="20" />
            </asp:LinkButton>
        </td>
        <td style="width: 18%; text-align:right;">
            <asp:Label ID="lblShipDate" runat="server" Text='<%#Eval("date")%>' />
        </td>
    </tr>
</ItemTemplate>


Solution :

If you mean a hover effect on the table-cell, then this should work:

tr.TableData td:hover {  
    background-color: red;  
}

    CSS Howto..

    How to make slanted ribbon

    (HTML/CSS) How to align a text to middle of center (in both x and y axis)? [duplicate]

    How To Make Navigation With Images That Is Clickable?

    CSS Divs overlapping, how do I force one above the other?

    How to start css and html

    How to install Firefox “Stylish” css file? [closed]

    How to make CSS animation jump rather than slide

    CSS overflow : How to fix css overflow scroll bug

    css: how to force images to scale at same amount?

    User agent, how to have diferent css files for diferent devices automaticly

    How to get full height of webpage with CSS?

    HTML5/CSS3 how to force text to require a certain width for rendering

    How to re-size constantly changing text to fit in a div with a fixed width, based on the changing of a