如何使用鼠標懸停事件更改listview選定的行backcolor

我有一個ASP.NET應用程序並使用ListView。這ListView有行和列。列是名字，姓氏，電子郵件等...每個Control在這ListView是LinkButton。如何使用鼠標懸停事件更改listview選定的行backcolor

我的想法：

如果用戶在LinkButton移動鼠標時，我想讓他們看到在該線路上不同BackroundColor。

例如：

enter image description here

我的代碼：

ASPX：

<body> 
    <form id="form1" runat="server"> 
    <div class="header"> 
     <br /> 
     <table id="SuchTabelle" runat="server" border="0"> 

      <tr> 
       <th><asp:Label ID="id_SearchUser" runat="server" Text="lblSearchUser"></asp:Label></th> 
       <th><asp:TextBox ID="txtBenutzer" runat="server" Width="250px"></asp:TextBox></th> 
       <th></th> 
      </tr> 
      <tr> 
       <th><asp:Label ID="id_location" runat="server" Text="lblLocation"></asp:Label></th> 
       <th><asp:DropDownList ID="dropWerk" runat="server" Width="250px" /></th> 
       <th><asp:Button ID="Button2" runat="server" Text="Suchen" 
           onclick="btnBenutzerSuchen_Click" Width="250" /></th> 
      </tr> 

     </table> 

     <br /> 
     <br /> 
     <b>&nbsp;&nbsp;&nbsp; Info:</b> 
     <asp:Label ID="lbMeldung" runat="server" 
      Text="Geben Sie den Kontakt ein, nachdem gesucht werden soll..."></asp:Label> 
     <br /> 
     <br /> 
     </div> 

     <div class="bodyList"> 


     <asp:ListView runat="server" ID="myListView"> 

     <LayoutTemplate> 
      <table id="UserTable" runat="server" border="0"> 
       <tr id="Tr1" style="background-color:#E5E5FE"> 
        <th runat="server"><asp:LinkButton ID="lnkBenutzer" runat="server" >id_Benutzer</asp:LinkButton></th> 
        <th runat="server"><asp:LinkButton ID="lnkemail" runat="server" >id_Email</asp:LinkButton></th> 
        <th runat="server"><asp:LinkButton ID="lnkVorname" runat="server" >id_Vorname</asp:LinkButton></th> 
        <th runat="server"><asp:LinkButton ID="lnkNachname" runat="server" >id_Nachname</asp:LinkButton></th> 
        <th runat="server"><asp:LinkButton ID="lnkTelefon" runat="server" >id_Telefon</asp:LinkButton></th> 
       </tr> 
       <tr runat="server" id="ItemPlaceholder"> 
       </tr> 
      </table> 
     </LayoutTemplate> 

     <ItemTemplate> 

      <tr>  
       <td align="left" ><asp:LinkButton CssClass="MyLink" OnCommand="Button1_Command" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="Label1" Text='<%# Eval("Benutzername") %>' runat="server" /></td> 
       <td align="left"><asp:LinkButton CssClass="MyLink" OnCommand="Button1_Command" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="Label2" Text='<%# Eval("eMail") %>' runat="server" /></td> 
       <td align="left"><asp:LinkButton CssClass="MyLink" OnCommand="Button1_Command" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="Label3" Text='<%# Eval("Vorname") %>' runat="server" /></td> 
       <td align="left"><asp:LinkButton CssClass="MyLink" OnCommand="Button1_Command" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="Label4" Text='<%# Eval("Nachname") %>' runat="server" /></td> 
       <td align="left"><asp:LinkButton CssClass="MyLink" OnCommand="Button1_Command" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="Label5" Text='<%# Eval("Telefonnummer") %>' runat="server" /></td> 

       <td align="left"><asp:Label ID="Label6" Text='<%# Eval("GUID") %>' runat="server" Visible="False" /></td> 

      </tr> 

     </ItemTemplate> 

     <AlternatingItemTemplate> 

      <tr style="background-color:#EFEFEF"> 

       <td align="left" ><asp:LinkButton CssClass="MyLink" OnCommand="Button1_Command" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="Label1" Text='<%# Eval("Benutzername") %>' runat="server" /></td> 
       <td align="left"><asp:LinkButton CssClass="MyLink" OnCommand="Button1_Command" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="Label2" Text='<%# Eval("eMail") %>' runat="server" /></td> 
       <td align="left"><asp:LinkButton CssClass="MyLink" OnCommand="Button1_Command" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="Label3" Text='<%# Eval("Vorname") %>' runat="server" /></td> 
       <td align="left"><asp:LinkButton CssClass="MyLink" OnCommand="Button1_Command" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="Label4" Text='<%# Eval("Nachname") %>' runat="server" /></td> 
       <td align="left"><asp:LinkButton CssClass="MyLink" OnCommand="Button1_Command" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="Label5" Text='<%# Eval("Telefonnummer") %>' runat="server" /></td> 

       <td align="left"><asp:Label ID="Label6" Text='<%# Eval("GUID") %>' runat="server" Visible="False" /></td> 

      </tr> 

     </AlternatingItemTemplate> 

     </asp:ListView> 

     <br /> 
     <br /> 

    </div> 

    </form> 
</body>

來源

2012-08-07 Tarasov

您可以使用CSS：

<LayoutTemplate> 
    <table id="UserTable" runat="server" class="myClass"> 
     <tr id="Tr1" class="myClass"> 
      <th id="Th1" runat="server"> 
       <asp:LinkButton ID="lnkBenutzer" runat="server" Text="id_Benutzer" /> 
      </th> 
      <th id="Th2" runat="server"> 
       <asp:LinkButton ID="lnkemail" runat="server" Text="id_Email" /> 
      </th> 
      <th id="Th3" runat="server"> 
       <asp:LinkButton ID="lnkVorname" runat="server" Text="id_Vorname" /> 
      </th> 
      <th id="Th4" runat="server"> 
       <asp:LinkButton ID="lnkNachname" runat="server" Text="id_Nachname" /> 
      </th> 
      <th id="Th5" runat="server"> 
       <asp:LinkButton ID="lnkTelefon" runat="server" Text="id_Telefon" /> 
      </th> 
     </tr> 
     <tr runat="server" id="ItemPlaceholder"> 
     </tr> 
    </table> 
</LayoutTemplate>

和在* .css文件：

.myClass 
{ 

} 

.myClass:hover 
{ 
background-color: Green; 
}

來源

2012-08-07 12:50:20

注：在IE中必須有一個聲明爲的：懸停選擇器上的其他元素比元件工作。 [http://www.w3schools.com/cssref/sel_hover.asp] – seekerOfKnowledge 2012-08-07 12:53:30

如何使用鼠標懸停事件更改listview選定的行backcolor

回答

相關問題