如果我在listView中进行鼠标，我可以从行中更改样式

我使用listView，如果我对物品进行鼠标，我想要其他颜色，还有其他字体大小和字体颜色...其他颜色可以使用，但是我可以做鼠标中的两个或多个样式汇总？

在这里我的listView：

<asp:ListView runat="server" ID="myListView" OnItemCommand="myListView_ItemCommand"
                       OnSelectedIndexChanging="myListView_SelectedIndexChanging" 
            > 

            <LayoutTemplate>
                <table runat="server" class="tablelistview" cellpadding="0" cellspacing="0">
                <tr class="TableClass">
                    <th align="left" runat="server"><asp:LinkButton ID="lnkLastname" runat="server" CssClass="MyLink" OnClick="lnkLastnameSort_Click" >Nachname</asp:LinkButton>
                    <asp:Image runat="server" ID="imgLastnameAsc" ImageUrl="~/App_Theme/asc.png" />
                    <asp:Image runat="server" ID="imgLastnameDESC" ImageUrl="~/App_Theme/desc.png" Visible="false" />
                    </th>
                    <th class="TableColumns"  runat="server"><asp:LinkButton ID="lnkFirstname" CssClass="MyLink" runat="server" OnClick="lnkFirstnameSort_Click" >Vorname</asp:LinkButton>
                    <asp:Image runat="server" ID="imgFirstnameAsc" ImageUrl="~/App_Theme/asc.png" Visible="false" />
                    <asp:Image runat="server" ID="imgFirstnameDesc" ImageUrl="~/App_Theme/desc.png" Visible="false" />
                    </th>
                    <th class="TableColumns" runat="server"><asp:Label ID="lnkPhone" runat="server" >Telefon</asp:Label></th>
                    <th class="TableColumns" runat="server"><asp:LinkButton ID="lnkDepartment" CssClass="MyLink" runat="server" OnClick="lnkDepartmentSort_Click">Abteilung</asp:LinkButton>
                    <asp:Image runat="server" ID="imgDepartmentAsc" ImageUrl="~/App_Theme/asc.png" Visible="false" />
                    <asp:Image runat="server" ID="imgDepartmentDesc" ImageUrl="~/App_Theme/desc.png" Visible="false" />
                    </th>
                    <th class="TableColumns" runat="server"><asp:LinkButton ID="lnkemail" CssClass="MyLink" runat="server" OnClick="lnkMailSort_Click" >Email</asp:LinkButton>
                    <asp:Image runat="server" ID="imgMailAsc" ImageUrl="~/App_Theme/asc.png" Visible="false" />
                    <asp:Image runat="server" ID="imgMailDesc" ImageUrl="~/App_Theme/desc.png" Visible="false" />
                    </th> 
                </tr>
                <tr runat="server" id="ItemPlaceholder">
                </tr> 
            </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr class="TableClassO" runat="server" onmouseover="this.style.backgroundColor='#838383'" onmouseout="this.style.backgroundColor='#ffffff'" titel="Auswahl"> 
                 <td align="left"><asp:LinkButton  CssClass="MyLink"  CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="Label4" Text='<%# Eval("Nachname") %>' runat="server"  /></td>
                 <td align="left"><asp:LinkButton  CssClass="MyLink" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="Label3" Text='<%# Eval("Vorname") %>' runat="server" /></td>
                 <td align="left"><asp:LinkButton  CssClass="MyLink"  CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="Label5" Text='<%# Eval("Telefonnummer") %>' runat="server"  /></td>
                 <td align="left"><asp:LinkButton  CssClass="MyLink"  CommandName="abteilung" CommandArgument='<%# Container.DataItemIndex %>' ID="Label7" Text='<%# Eval("Abteilung") %>' runat="server"  /></td>
                 <td align="left"><asp:ImageButton Width="15" Height="15" CssClass="MyLink" CommandName="mailto"  CommandArgument='<%# Container.DataItemIndex %>' ID="Label8" ImageUrl="~/App_Theme/Email.ico" runat="server" />
                 <asp:LinkButton  CssClass="MyLink"  CommandName="mailto" CommandArgument='<%# Container.DataItemIndex %>' ID="Label2" Text='<%# Eval("eMail") %>' runat="server" ToolTip="Öffnet Outlook" /></td>
                 <td align="left"><asp:Label ID="Label6" Text='<%# Eval("GUID") %>' runat="server" Visible="False" /></td>
            </tr>
            </ItemTemplate>
            <AlternatingItemTemplate>
                <tr class="TableClassO" runat="server" style="background-color:#E5EDF5;" onmouseover="this.style.backgroundColor='#838383'" onmouseout="this.style.backgroundColor='#E5EDF5'" titel="Auswahl"> 
                 <td align="left"><asp:LinkButton  CssClass="MyLink"  CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="Label4" Text='<%# Eval("Nachname") %>' runat="server"  /></td>
                 <td align="left"><asp:LinkButton  CssClass="MyLink" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="Label3" Text='<%# Eval("Vorname") %>' runat="server" /></td>
                 <td align="left"><asp:LinkButton  CssClass="MyLink"  CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="Label5" Text='<%# Eval("Telefonnummer") %>' runat="server"  /></td>
                 <td align="left"><asp:LinkButton  CssClass="MyLink"  CommandName="abteilung" CommandArgument='<%# Container.DataItemIndex %>' ID="Label7" Text='<%# Eval("Abteilung") %>' runat="server"  /></td>
                 <td align="left"><asp:ImageButton Width="15" Height="15" CssClass="MyLink" CommandName="mailto"  CommandArgument='<%# Container.DataItemIndex %>' ID="Label8" ImageUrl="~/App_Theme/Email.ico" runat="server" />
                 <asp:LinkButton  CssClass="MyLink"  CommandName="mailto" CommandArgument='<%# Container.DataItemIndex %>' ID="Label2" Text='<%# Eval("eMail") %>' runat="server" ToolTip="Öffnet Outlook" /></td>
                 <td align="left"><asp:Label ID="Label6" Text='<%# Eval("GUID") %>' runat="server" Visible="False" /></td>
            </tr>
            </AlternatingItemTemplate>
            <EmptyDataTemplate>
                 <div><h4>Es wurden keine Einträge gefunden</h4></div>
            </EmptyDataTemplate>
        </asp:ListView>

是的，很容易这样做：

<style type="text/css">
    .TableClass:hover {
        background-color: red;
        font-family: courier new;
    }
</style>

以上只是一个示例。您只需将" Tableclass"替换为该行的名称。

样式部分通常放在头部部分，或从外部文件链接。

以获取进一步的参考，请在此处查看W3School网站：

http://www.w3schools.com/cssref/sel_hover.asp

另外，我想指出，您应该在其他任何内容上使用CSS，因为它对浏览器（以及更兼容的跨浏览器）。

另一件事。通过将您的样式放在每个TR元素中是一团糟。通过使用CSS，您将其放置在一个位置，因此，当您想稍微修改样式时，可以更改一个位置。使用当前的解决方案，您必须在每一行上更改它，并且页面的大小将大大膨胀！

是的，您可以喜欢

<tr class="TableClassO" runat="server" 
  onmouseover="this.style.backgroundColor='#838383'; this.style.color='some-color';" 
  onmouseout="this.style.backgroundColor='#ffffff'; this.style.color='some-other-color'" titel="Auswahl">

对于字体颜色，您可以使用this.style.color和字体大小this.style.fontSize

但是，如果您创建一个CSS规则类，则很容易：

tr.TableClassO:hover { your_css_rule_here ;} 
// It will run when mouse over on tr, then you dont need to use js events.

相关内容

最新更新

热门标签：