Highlight ASP.NET GridView Rows On Mouse Over Using VB.NET

Here, we will see how to highlight rows of GridView on mouse hover in ASP.NET with the help of VB.NET
  • 5537
To apply the hover effect to the GridView rows we can use CSS. The below code define the CSS in head section.

<style type="text/css">

 #GridView2 tr.rowHover:hover


        background-color: red;

        color: black;

        font-family: Arial;




CSSClass property

CssClass property of the GridView has been set as rowHover when GridView renders on the page, each row of the GridView is rendered with rowHover CSS class that only takes effect when we mouse hover on the GridView row.




GridView With cssClass


.aspx code


<asp:GridView ID="GridView2" runat="server" 

            CssClass="rowHover" ClientIDMode="Static" Height="175px"

            Width="345px"   >

            <RowStyle CssClass="rowHover" />



.CS code


Imports System.Data.SqlClient

Public Class WebForm1

    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        Dim tab As New Table

        Dim con As New SqlConnection("Data Source=(local); uid=sa; pwd=Password$2; database=master")


        Dim dt As New SqlDataAdapter("select * from Article", con)

        Dim ds As New DataSet()

        dt.Fill(ds, "article")

        GridView2.DataSource = ds


    End Sub

End Class

Now run the application.

Now move the mouse over GridView.



More Articles

© 2020 DotNetHeaven. All rights reserved.