0

私は ListView を使用していますが、アイテムについてマウスオーバーすると、別の色と別のフォント サイズとフォント色が得られます...他の色は機能しますが、マウスオーバーで 2 つ以上のスタイル変更を行うことはできますか?

ここに私の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 はブラウザーにとってよりネイティブである (そしてクロスブラウザーとの互換性が高い) ため、他の何よりも CSS を使用する必要があることを述べたいと思います。

別物。スタイルを各 TR 要素に入れるのは面倒です。CSS を使用すると、それを 1 つの場所に配置することになるため、スタイルを少し変更したい場合は、その 1 つの場所だけを変更できます。現在のソリューションでは、すべての行で変更する必要があり、ページのサイズが大幅に肥大化します!

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 に答える