c# - CSSを使用したGridview ASP.netでのマウスオーバーホバー

Question

これはおそらく非常に単純なことですが、私は CSS にまったく慣れていません。グリッドビューの行にマウスオーバーのホバー効果を持たせたいだけで、ホバーされている場合は行の色を変更します。CSS ファイルが適切な場所にあるかどうか知りたいのですが。私の Gridview.CSS は、私の gridview.aspx と同じフォルダーにある必要があります (私はそう思いますか?)。

ここに私のCSSファイルがあります:

.Gridview tr.normal
 {
   background-color:white;
 }

 .Gridview tr.highlight
  {
     background-color:yellow;
  }

そして、ここに私がそれを実装しようとしている方法があります: .aspx ファイル内:

 <asp:GridView ID="MsgInbox" runat="server" ....OnRowCreated="Gridview_RowCreated" CssClass = "Gridview">

C# のコードビハインドでは、次のようになります。

    protected void Gridview_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.CssClass = "highlight";
        }
    }

私の C# には本当に単純なものが欠けているに違いないことはわかっています。どんな助けでも大歓迎です！ありがとう！

score 4 · Accepted Answer

これに対するソリューションの一部を別の回答から盗んだので、スタイリングはすべてのグリッドビューに一度に影響します。

CssClass="GridView"これを asp:GridView タグに追加します。

<asp:GridView ID="grdLongID" runat="server" CssClass="GridView" CellPadding="4" ForeColor="#333333" GridLines="None" AllowSorting="true" OnSorting="grdLongID_Sorting" RowStyle-HorizontalAlign="center" AutoGenerateColumns="False" Width="100%">

次に、style.css で次のようなことができます。

table.GridView th {
  border-bottom: 1px solid #ED7A0A;
  text-decoration: none;
}

table.GridView tr:hover {
  background-color: #fabf85;
}

鍵は:hover疑似クラスです。

score 3 · Accepted Answer

まず、このコードを使用して行スタイルを設定します。GridView内で、これを呼び出します。.row

<RowStyle CssClass="row"  />

次に、このcssを使用して、背景色、またはマウスを上に移動したときに好きな色を変更します。

tr.row
{
    background-color:#fff;
}


tr.row td
{ 
}

tr.row:hover td, 
tr.row.over td
{ 
    background-color: #eee;
}

ここでの秘訣は、GridViewがテーブルとしてレンダリングされるため、テーブルの行上でマウスにアクセスするためのスタイルにtdとを追加することです。tr

使用したい場合は別の行スタイルもあるのでAlternatingRowStyle、同じ方法でもう1つのスタイルを簡単に作成できます。

score 1 · Accepted Answer

これが私がこれを達成した方法です：

このチュートリアルに従って、マウスオーバーで強調表示された行を変更します。

http://msmvps.com/blogs/deborahk/archive/2010/01/25/asp-net-selecting-a-row-in-a-gridview.aspx

これは、行選択を処理するためのコードについても説明しています。グリッドビューの行の色が交互になっています。ホバーした行の元の色を復元するには、元のbackgroundColorのマウスオーバーでカスタム属性を作成し、次のようにmouseOutで復元します。

row.Attributes["onmouseover"] = "this.originalstyle=this.style.backgroundColor;this.style.cursor='hand';this.style.backgroundColor='#ffccff';";

row.Attributes["onmouseout"] = "this.style.textDecoration='none';this.style.backgroundColor=this.originalstyle;";

score 0 · Accepted Answer

これはとても簡単なことです。

ヘッド部分にCSSを追加します

#MainContent_gvDevice tr:Hover
{  
    background-color:#F6F6F6;
}

gvDeviceここにグリッドビューIDを入力する代わりに。

score 0 · Accepted Answer

RowCreatedを使用してホバー効果を作成できます。これには、ポストバックが必要になるためです。css内でホバー疑似クラスを使用する必要があります。このようなもの

.Gridview tr:hover
{
  background-color:blue;
  color:white;
}

ここで、GridviewcssクラスがGridviewに適用されます

score 0 · Accepted Answer

これは、ToolTip と ForeColor を使用した Gridviewの列セルのホバーカラー用です。

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Cells[2].Attributes["onmouseover"] = "this.style.cursor='pointer';this.style.textDecoration='underline';this.style.backgroundColor='aqua'";
        e.Row.Cells[2].Attributes["onmouseout"] = "this.style.textDecoration='none';this.style.backgroundColor='white'";
        e.Row.Cells[2].ToolTip = "You can click this cell";
        e.Row.Cells[2].ForeColor = System.Drawing.Color.Blue;
    }
}

ありがとうございました

score 0 · Accepted Answer

これは私が私のプロジェクトで行った方法です

CSS:

.tdonhover { background-color:#d9d9d9 !important; }

<script type="text/javascript">
        $(document).ready(function () {
         $('td').hover(function () {
                $('tr').each(function () {
                    $(this).removeClass('tdonhover');
                });
                $(this).parent().addClass('tdonhover');
            });
          });

    </script>

Default.aspx ページ:このページには gridview コントロールが含まれています。

               ` <asp:GridView ID="GridView1" runat="server" CellPadding="4" Width="940px" CssClass="gvClass gvalign" BorderColor="#E0DCD0" BorderStyle="Solid" BorderWidth="1px"
                       ForeColor="#333333" GridLines="None" >
                        <Columns>
                        <asp:TemplateField HeaderText="Srno" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="40">
                            <ItemTemplate>
                                <%# Container.DataItemIndex+1 %>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <FooterStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True" />
                    <RowStyle ForeColor="#603813" BackColor="#F7F6F3" />
                    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                    <HeaderStyle BackColor="#A86E07" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
                    <EditRowStyle BackColor="#999999" />
                    <AlternatingRowStyle BackColor="White" ForeColor="#A86E07" />
                </asp:GridView>`

使用する

<RowStyle ForeColor="#603813" BackColor="#F7F6F3" />
<AlternatingRowStyle BackColor="White" ForeColor="#A86E07" />

代替行の背景色とフォントカラーを設定できます

c# - CSSを使用したGridview ASP.netでのマウスオーバーホバー

10 に答える 10

Related

Reference