0

我使用 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>
4

2 回答 2

2

是的，很容易，通过这样做：

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

以上只是一个例子。您只需将“TableClass”替换为行类的名称。

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

如需进一步参考，请查看 W3school 网站：

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

另外，我只想声明，你应该使用 CSS 而不是其他任何东西，因为它对浏览器来说更加原生（并且更兼容跨浏览器）。

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

SR

于 2012-10-24T07:06:25.210 回答
1

是的，你可以喜欢

<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

但是如果你为 :hover 创建一个 css-rule 类会很容易

tr.TableClassO:hover { your_css_rule_here ;} 
// It will run when mouse over on tr, then you dont need to use js events.
于 2012-10-24T07:05:06.363 回答