Tips for adjusting the appearance of a datagridview row when hovering over it:

How can I make the color change in a datagridview row when the user hovers over it? Currently, I am only able to get the gray rows to turn blue on hover, but I want this effect to apply to all rows except the footer as well. How can I achieve this without affecting the footer? Thank you for your assistance.

Below is my aspx code:

<asp:GridView ID="editingGrid" runat="server" AutoGenerateColumns="false" ShowFooter="false" DataKeyNames="componente_id"
            ShowHeaderWhenEmpty="true" AllowPaging="True" OnPageIndexChanging="gridView_PageIndexChanging" OnRowDataBound = "OnRowDataBound" OnSelectedIndexChanged = "OnSelectedIndexChanged" 
            CellPadding="3" GridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">
        <PagerSettings  Mode="Numeric" /> 
        <Columns>
            <asp:TemplateField HeaderText="Familia">
                <ItemTemplate>
                    <asp:Label Text='<%# Eval("familia") %>' runat="server" />
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="txtfamilie" Text='<%# Eval("familia") %>' runat="server" />
                </EditItemTemplate>
            </asp:TemplateField>        

            </Columns>
        </asp:GridView>

And here is my CSS and HTML:

:root {
  --main-color: #1b9bff;
}

.mGrid {
  width: 100%;
  background-color: #fff;
  margin: 5px 0 10px 0;
  border: solid 1px #525252;
  border-collapse: collapse;
}

.mGrid td {
  padding: 2px;
  border: solid 1px #c1c1c1;
  color: #000;
}

.mGrid th {
  padding: 4px 2px;
  color: #fff;
  background: #424242 url(/images/grd_head.png) repeat-x top;
  border-left: solid 1px #525252;
  font-size: 0.9em;
}

.mGrid th:hover {
  color: #1b9bff;
}

.mGrid .alt {
  background: #c4c9d2 url(/images/rd_alt.png) repeat-x top;
}

.mGrid .alt:hover {
  background-color: #1b9bff;
}

.mGrid .pgr {
  background: #424242 url(/images/grd_pgr.png) repeat-x top;
}

.mGrid .pgr table {
  margin: 5px 0;
}

.mGrid .pgr td {
  border-width: 0;
  padding: 0 6px;
  border-left: solid 1px #666;
  font-weight: bold;
  color: #fff;
  line-height: 12px;
}

.mGrid .pgr a {
  color: #666;
  text-decoration: none;
}

.mGrid .pgr a:hover {
  color: #000;
  text-decoration: none;
}
<table class="mGrid" cellspacing="0" cellpadding="3" id="PageContent_editingGrid" style="border-collapse:collapse;">
  <tr>
    <th scope="col">Familia</th>
    <th scope="col">Marca</th>
    <th scope="col">Tipo</th>
    <th scope="col">Designacion</th>
    <th scope="col">Referencia</th>
  </tr>
  <tr title="Haga clic para seleccionar esta fila." onclick="javascript:__doPostBack(&#39;ctl00$PageContent$editingGrid&#39;,&#39;Select$0&#39;)">
    <td>
      <span>circuito integrado</span>
    </td>
    <td>
      <span id="PageContent_editingGrid_myText_0">Kemet</span>
    </td>
    <td>
      <span>electronics</span>
    </td>
    <td>
      <span>capteur</span>
    </td>
    <td>
      <span>calle mayor</span>
    </td>
  </tr>
  <tr class="alt" title="Haga clic para seleccionar esta fila." onclick="javascript:__doPostBack(&#39;ctl00$PageContent$editingGrid&#39;,&#39;Select$0&#39;)">
    <td>
      <span>circuito integrado</span>
    </td>
    <td>
      <span id="PageContent_editingGrid_myText_0">Kemet</span>
    </td>
    <td>
      <span>electronics</span>
    </td>
    <td>
      <span>capteur</span>
    </td>
    <td>
      <span>calle mayor</span>
    </td>
  </tr>
  <tr class="pgr">
    <td colspan="5">
      <table>
        <tr>
          <td><span>1</span></td>
          <td><a href="javascript:__doPostBack(&#39;ctl00$PageContent$editingGrid&#39;,&#39;Page$2&#39;)">2</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

cssasp.netdatagridview

Answer №1

To make all rows of data turn blue on hover, excluding the header and footer pager row, you can define the following style in your stylesheet:

.mGrid > tbody > tr:not(.pgr):hover {
  background-color: #1b9bff;
}

The selector .mGrid tbody > tr will target all rows in the table body (excluding the header in <thead>), :not(.pgr) will exclude the footer/pager row, and :hover will apply the style on hover.

:root {
  --main-color: #1b9bff;
}

.mGrid {
  width: 100%;
  background-color: #fff;
  margin: 5px 0 10px 0;
  border: solid 1px #525252;
  border-collapse: collapse;
}

.mGrid td {
  padding: 2px;
  border: solid 1px #c1c1c1;
  color: #000;
}

.mGrid th {
  padding: 4px 2px;
  color: #fff;
  background: #424242 url(/images/grd_head.png) repeat-x top;
  border-left: solid 1px #525252;
  font-size: 0.9em;
}

.mGrid th:hover {
  color: #1b9bff;
}

.mGrid .alt {
  background: #c4c9d2 url(/images/rd_alt.png) repeat-x top;
}

.mGrid > tbody > tr:not(.pgr):hover {
  background-color: #1b9bff;
}

.mGrid .pgr {
  background: #424242 url(/images/grd_pgr.png) repeat-x top;
}

.mGrid .pgr table {
  margin: 5px 0;
}

.mGrid .pgr td {
  border-width: 0;
  padding: 0 6px;
  border-left: solid 1px #666;
  font-weight: bold;
  color: #fff;
  line-height: 12px;
}

.mGrid .pgr a {
  color: #666;
  text-decoration: none;
}

.mGrid .pgr a:hover {
  color: #000;
  text-decoration: none;
}
<table class="mGrid" cellspacing="0" cellpadding="3" id="PageContent_editingGrid" style="border-collapse:collapse;">
  <tr>
    <th scope="col">Category</th>
    <th scope="col">Brand</th>
    <th scope="col">Type</th>
    <th scope="col">Designation</th>
    <th scope="col">Reference</th>
  </tr>
  <tr title="Click to select this row." onclick="javascript:__doPostBack(&#39;ctl00$PageContent$editingGrid&#39;,&#39;Select$0&#39;)">
    <td>
      <span>Integrated Circuit</span>
    </td>
    <td>
      <span id="PageContent_editingGrid_myText_0">Kemet</span>
    </td>
    <td>
      <span>Electronics</span>
    </td>
    <td>
      <span>Sensor</span>
    </td>
    <td>
      <span>Main Street</span>
    </td>
  </tr>
  <tr class="alt" title="Click to select this row." onclick="javascript:__doPostBack(&#39;ctl00$PageContent$editingGrid&#39;,&#39;Select$0&#39;)">
    <td>
      <span>Integrated Circuit</span>
    </td>
    <td>
      <span id="PageContent_editingGrid_myText_0">Kemet</span>
    </td>
    <td>
      <span>Electronics</span>
    </td>
    <td>
      <span>Sensor</span>
    </td>
    <td>
      <span>Main Street</span>
    </td>
  </tr>
  <tr class="pgr">
    <td colspan="5">
      <table>
        <tr>
          <td><span>1</span></td>
          <td><a href="javascript:__doPostBack(&#39;ctl00$PageContent$editingGrid&#39;,&#39;Page$2&#39;)">2</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer №2

At this moment, you are only adjusting the font color of the individual cell in the header by applying the hover style to:

.mGrid th:hover{...}

If you want the same style to be applied to cells in each row, you simply need to include td:hover as well:

.mGrid th:hover, .mGrid td:hover {...}

Remember to separate them with a comma and use the complete CSS style selector for the td. However, this will only affect the cell in each row, not the entire row.

If you want the entire row to be affected, you need to add another selector. For example, to change the background color:

.mGrid tr:hover {
    background-color: #eeeeee;
}

Adding font color changes to this selector won't work, even with the !important flag – only the background color will change.

.mGrid tr:hover {
    color: #1b9bff !important;
    background-color: #eeeeee;
}

This is because the tr element has a background color property but no foreground (font) color.

To ensure that the style is applied to nested child elements when hovering over the row, you can do the following:

.mGrid tr:hover td {
    color: #1b9bff;
    background-color: #eeeeee;
}

Now, the background and font colors of your row should change when hovered over, without the need for the !important flag.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Step by step guide on inserting a message (memo/sticky note) onto an HTML page

Wondering how to accomplish this: I've designed an HTML5 homepage and I'm looking to display a message to visitors, such as "Dear visitor, I am currently on vacation from....", in the form of a memo or sticky note positioned in the top right cor ...

javascriptjquerycsshtml

Incorporating CSS styling to specific elements

I am facing an issue with a CSS rule that looks like this: div#tabstrip.tabstrip-vertical.k-widget.k-header.k-tabstrip div#tabstrip-4.k-content.k-state-active{ background-image: url("http://wwww.example.com/logo2.png") !important; background-posit ...

htmlcss

The resizing issue of Textarea during transitions

Whenever I add the transition property to a textarea, it automatically affects the resizing function of the textarea. Is it possible to disable the transition only when resizing the textarea, but not for the textarea itself? <textarea name="" id="" cla ...

javascriptjqueryhtmlcss

In every browser except for Safari on iPad, a white X is displayed in the grey box. I'm wondering if the error lies with me or with Safari

When using Safari on my iPad, I noticed that the white X appears on the right-hand side of the black screen. Since this is the only version of Safari that I have, I am unsure if this issue is specific to iPads, Safaris, or just my device. Visit this link ...

htmlcssiosipadsafari

Designing materials involves organizing 5 items in a section, as dividing 12 by 5 results in an unattractive

Incorporating the Material Design Light library into my webpage, I have a section with 5 items that I want to evenly occupy the space: <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp social-section"> <a href="http: ...

cssmaterial-design

What is the best way to ensure that all of my images are the same size?

I've been working on making my pictures of varying resolutions the same size here, but no matter what I try, it just doesn't seem to work. Here is what I'm getting: . When I change the state to 1, 2, 3, or 4, I want it to look like this: her ...

javascripthtmlcssreactjs

Learning HTML and CSS integration through Codecademy is a fundamental part of the course

After following the instructions from an old HTML and CSS introduction on , I successfully created my first website. However, the code works perfectly on a special constructor page, but once I try to view it on a browser, the HTML and CSS don't seem t ...

htmlcss

What is the best way to make a selected link stand out with a highlight?

I'm having an issue with the code below that is supposed to keep the selected link highlighted, but it only flashes the green color on click. Can someone help me figure out what's going wrong here? #sidebarContent a:active{ background-colo ...

javascriptjqueryhtmlcss

A set of six DIV's, divided into two columns of three each

I'm attempting to arrange two columns with three vertical DIVs side by side. The left column is designated for main text, while the right column is reserved for miscellaneous information. Each column consists of a top and bottom DIV that display image ...

htmlcss

Steps to prevent user input on a textbox in asp.net that is associated with a date picker

Within my web application built with asp.net, I have a textbox with a connected date picker using jQuery. The goal is to disable the ability for users to manually enter text into the textbox. Instead, they should only be able to select a date from the da ...

jqueryasp.net

Having trouble fetching JSONP data with $.getJSON

I am attempting to make a JSONP request for data from , but unfortunately, it's not functioning properly. If you visit the provided URL, you will be able to view the JSON data. I am personally converting an ASP.net object to JSON, so if there are any ...

asp.netjsonjqueryjsonp

Ways to prevent a page from scrolling

I'm currently working on a webpage that features a vertical drop-down menu. The issue I'm facing is that when the menu drops down, it causes the text below it to be pushed downwards and off the page. While this behavior is anticipated, it also tr ...

htmlcssscroll

Tips for incorporating a custom CSS design into a jQueryUI tooltip

I am struggling to apply my custom CSS class on top of the jQueryUI tooltip. Although the tooltip is displaying correctly, my styles are not being applied. Here is the code I'm using: $(document).ready(function () { $("#roles").tooltip({ content: ...

javascriptjqueryhtmlcssjquery-ui

Clicking on text within a DIV using jQuery

How can I use jQuery to show an "alert" when text inside a DIV is clicked, excluding images and other tags? The texts are contained within various DIVs along with images and tags. Is there a way to achieve this using jQuery? Check out the jsFiddle example ...

jquerycsshtmlselect

CSS code that causes the animated photo banner to reset instead of continuously looping back to the first

I followed a tutorial and created this banner using HTML and CSS. However, I encountered an issue where instead of the banner continuing in loops, it keeps resetting. Since we haven't covered JavaScript yet in university, I'm looking for help to ...

htmlcss

Varied quantities of columns in each row

Correct LayoutI am looking to customize the layout by displaying the first two rows with 3 columns each, the third row with 5 columns, and the fourth row with 4 columns, using CSS modifications only. CSS ul { columns: 3; } HTML <ul class="list&qu ...

htmlcss

Using CSS grid to wrap three divs simultaneously

Can CSS grid be utilized to style three divs so that they wrap simultaneously when the screen size decreases? This transition: +---------+--+---------+--+---------+ | div | | div | | div | +---------+--+---------+--+---------+ to this: +- ...

htmlcssgrid-layoutcss-grid

Retrieving data from a radgrid with the power of jQuery

Trying to extract the text from the label GetName in a radgrid using jQuery. Need to iterate through each record to check the value of the label. Can anyone provide assistance? Thanks! Below is the code for my radgrid. <telerik:RadGrid ID="Gridview1 ...

javascriptjqueryasp.net

Tips for updating user data in ASP.NET

I am currently developing an ASP.NET Core MVC application that utilizes ASP.NET Identity for user management. Each user has the ability to log in and access their own personalized page where they can manage their favorite movies. One issue I am facing is ...

c#asp.net

Dynamic water filling effect with SVG

I'm trying to create a wipe animation that looks like water filling up inside of a drop shape. Currently, it is a square with a wave animation on top of the drop logo. The wave animation works correctly, but I am struggling to contain it within the dr ...

javascriptcssanimationsvgfill