ASP.NET DataList - 鼠标悬停时行背景颜色更改

Question

我试图在移动时改变行背景颜色，但我无法让它工作。我不确定我使用 OnItemDataBound 是否正确或我的代码隐藏不正确。

请帮忙。谢谢！

<asp:DataList BackColor="#ffffff" id="DataList1" DataSourceID="dsCompanyListPartialMatch"  runat="server" Width="80%" DataKeyField="Company1Word"
    UseAccessibleHeader="true"
    CssClass="books"
    HeaderStyle-CssClass="header"
    ItemStyle-CssClass="item"
    AlternatingItemStyle-CssClass="alternating" 
    GridLines="Both"
    CellPadding="0"
    CellSpacing="0" BorderColor="Black"
    ItemStyle-BorderColor="Black" BorderWidth="0"
     HorizontalAlign="Center"
    RepeatDirection="Vertical" 
    OnItemDataBound="DataList1_ItemDataBound"
    >                
    <HeaderTemplate>
    </HeaderTemplate>

    <ItemStyle BorderColor="black" Font-Size="Medium" /> 
    <ItemTemplate>
        <table border="0">
        <tr>
            <td style="width: 50px; border-right:1px solid black; border-spacing:0;  text-align:center; ">        
            <asp:LinkButton>
                <asp:LinkButton ID="LinkButton2" runat="server" Text="+" CommandArgument='<%#Container.ItemIndex%>'
                OnCommand="LinkButton1_Command"  
                Font-Underline="false"       
                Height="25"      
                Font-Bold="true"                  
                ></asp:LinkButton>
            </td>
              <td style="width: 50px; border-right:1px solid black; border-spacing:0;"><%#Eval("Row")%></td>
              <td style="width: 800px"><asp:Literal ID="litFoo" runat="server" Text='<%#Eval("Company")%>' /> </td>
             <td style="width: 600px; text-align:right;">
                <asp:CheckBox  id="check1" runat="server" />
            </td>
            <asp:Label ID="lblRow" Visible="False" runat="Server" Text='<%# DataBinder.Eval(Container.DataItem, "Row") %>' />
        </tr>    
        </table>     

              <asp:Panel ID="pnlChildView" runat="server" style="padding-left:200px;">
                <asp:DataList ID="childList" runat="server" Width="100%">
                   <ItemTemplate>
                        <table class="table1" border="1">
                       <tr>
                          <td style="width: 800px; border-right:0px solid black; border-spacing:0;">&#8226; <%#Eval("CompanyName")%></td>
                           <td style="text-align:right; "><a href="/Apps/ERP/Other/CompanyInfo.asp?CompanyID=<%#Eval("CompanyID")%>" ><%#Eval("CompanyID")%></a></td>                      
                       </tr>
                        </table>
                   </ItemTemplate>
               </asp:DataList>
           </asp:Panel>
    </ItemTemplate>
     <FooterTemplate>
    </FooterTemplate>                
</asp:DataList>

后面的代码

protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item)
    {

        e.Item.Attributes.Add("onmouseover", "this.className='BGMouseOver'");

        e.Item.Attributes.Add("onmouseout", "this.className='BGMouseOut'");

    }
}

Answer 1

试试 jQuery mouseover() 方法

Click here

Answer 2

我建议使用 CSS。你可以在这里找到这个想法：div background color, to change onhover

将 CSS 添加到顶部：

<style type="text/css">
    .div_hover:hover { background-color: #000000; } <-- this is where you set your hover color
</style>

基本上，将 ItemTemplate 中的所有内容包装在一个 div 中，如下所示：

<ItemTemplate>    
    <div class="div_hover">
        [ItemTemplate stuff...]
    </div>
</ItemTemplate>