Modify the background color of every row in a table when the mouse is positioned over them, specifically for rows following a specific class, using

I have a table with multiple rows, where the first row serves as the header and is styled differently using CSS.

Now, I am looking to change the background color of all the remaining rows within that table on mouseover using CSS. However, the header row's background should remain unchanged.

HTML

<table border="1" width="100%" id="table1">
<tr class="headerStyle">
<td>Sl.No</td>
<td>Name</td>
<td>Code</td>
</tr>

<tr>
<td>1</td>
<td>Name1</td>
<td>Code1</td>
</tr>

<tr>
<td>2</td>
<td>Name2</td>
<td>Code2</td>
</tr>

<tr>
<td>3</td>
<td>Name3</td>
<td>Code3</td>
</tr>
</table>

CSS

.headerStyle {
    color: #ffffff;
    font-size: 13px;
    text-align: center;
    font-weight: 500;
    background-color: #07889b;
}

.headerStyle + tr:hover {
    background-color: #bedcfc;
}

I have tried various suggestions from sources like Stack Overflow without success.

Although I attempted the above solution, it only changes the first row's background color.

Is there a way to accomplish this purely through CSS? Thank you in advance.

htmlcss

Answer №1

+ represents the adjacent sibling, but if you are searching for the ~ (General sibling selectors.).

For proper semantic structure, the table header should be within the thead tag of your table, and the remaining rows should be in the tbody. By structuring it this way, all your tr elements will automatically be placed in the tbody. Additionally, use th for the header and not td.

Your structure should resemble this:

<table border="1" width="100%" id="table1">
  <thead>
    <tr>
      <th>Sl.No</th>
      <th>Name</th>
      <th>Code</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Name1</td>
      <td>Code1</td>
    </tr>

    <tr>
      <td>2</td>
      <td>Name2</td>
      <td>Code2</td>
    </tr>

    <tr>
      <td>3</td>
      <td>Name3</td>
      <td>Code3</td>
    </tr>
  </tbody>
</table>

If structured this way, your table will have a correct semantic structure without any issues with your css rules:

thead tr {
  color: #ffffff;
  font-size: 13px;
  text-align: center;
  font-weight: 500;
  background-color: #07889b;
}

tbody tr:hover {
  background-color: #bedcfc;
}

If you prefer not to structure your code as suggested, then the css rule would need to be adjusted like this:

.headerStyle ~ tr:hover {
    background-color: #bedcfc;
}

Answer №2

Check out this CSS snippet

.customHeader 
{
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  font-weight: 600;
  background-color: #145678;
}

tr:hover:not(.customHeader):hover 
{
  background-color: #abcdef;
}

If you're working with multiple tables in your code, make sure to assign unique classes to each table. Here's an example for reference.

demo.

I hope this information proves helpful to you.

Answer №3

When styling your table rows with CSS, it's important to consider the structure of your HTML. To ensure that only certain rows are affected by your CSS code, you should include thead and tbody tags in your table markup. A proper table structure would look like this:

<table>
  <thead>
    <tr class="xyz">
      <td>.....</td>
      ........
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      ............
    </tr>
    ................
  </tbody>
</table>

If you prefer not to modify your existing HTML structure, you can still prevent the background color of your header row from changing by using CSS. Simply update your CSS as follows:

.headerStyle {
    color: #ffffff;
    font-size: 13px;
    text-align: center;
    font-weight: 500;
    background-color: #07889b;
}
tr.headerStyle:hover {
  background-color: #07889b;
}
 tr:hover {
    background-color: #bedcfc;
}

Answer №4

Take a look at the latest version of the fiddle... does it meet your requirements?

see demo

.headerStyle {
  color: #ffffff;
  font-size: 13px;
  text-align: center;
  font-weight: 500;
  background-color: #07889b;
}
tr:hover {
  background-color: #bedcfc;
}

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

How can the style of a div's :after pseudo-element be modified when hovering over its :before pseudo-element?

Here is some CSS code: .myDiv:before{ content:''; width:15px; height:15px; display:block; } .myDiv:after{ ... ... display:none; } And here is the corresponding HTML code: <div class='myDiv'></div> ...

htmlcsshover

Alter the backdrop of this email template

I'm struggling to replace the blue and grey background of my email template with an image. Any suggestions on how I can achieve this? Here is the Html Code link for reference I attempted to modify the body tag, but it didn't result in any chang ...

htmlcsshtml-email

Creating a color icon for StackExchange using HTML

I am currently working on building my personal website. I am looking to include a link to my Stack Exchange profile on my site using the Stack Exchange icon. However, the icons available in Font Awesome are grayscale and not colored like other icons such a ...

htmlcsscolorsiconsstackexchange

Automatically focus on input when scrolling reaches a specific element using jQuery

I have been utilizing a jQuery plugin called Waypoints to handle scroll actions. My goal is to focus on the first input element of a section that is currently visible on the screen and then shift the focus to the input of the next respective sections as t ...

javascriptjqueryhtmlcss

Issue with fetching API data and sending it to the Node server

My node backend is all set up and running smoothly for GET requests, but I'm facing an issue with POST requests as the data doesn't seem to be getting sent to the backend. Here's the code snippet: fetch("http://localhost:3000/", ...

javascripthtmlnode.jspostfetch-api

The challenge of handling overflow in CSS slide-in and slide-out animations

Trying to achieve a smooth animation where one list of tiles moves off screen as another list comes into view. Utilizing Angular's ng-for to iterate through a visible items array, causing only one list technically despite Angular's ngAnimate mod ...

htmlcssangularjscss-animationsng-animate

Ways to position Drop-down menu flush against the left edge of the webpage?

I am facing a challenge in customizing my CSS3 Mega drop-down menu. I want the mega menu to start from the left side of the main page, beginning from the home button area and extending all the way to the end. Currently, it is appearing where the parent men ...

htmlcss

The login page allows entry of any password

I'm running a xamp-based webserver with an attendance system installed. I have 10 registered users who are supposed to log in individually to enter their attendance. However, there seems to be an issue on the login page where any password is accepted ...

javascriptphphtmlserver

``Despite setting display block, margin auto is not being adhered to as expected

Trying to position two label elements on either side of a div container has been tricky. Despite using various display properties like display: block and display: inline-block, the margins are not behaving as expected. div { color: #ffffff; ...

htmlcsslabelmargindisplay

The carousel is having trouble aligning the images div to the center

Struggling to create a carousel slide that automatically resizes image, but can't seem to get the inner div containing the images to center within the outer div. Even after trying various CSS properties like text-align:center and margin-left: auto, th ...

htmlcssdjango-templatescarousel

The art of slipping away from a character in JavaScript while adding HTML using jQuery

I am trying to add multiple HTML canvas elements to an existing HTML canvas. <div> <canvas id="BackGroundImage" width="800" height="300" style="position: absolute; z-index: 0;"></canvas> <canvas id="canvas" width= ...

javascriptjqueryhtmlcanvas

Update the identifiers and titles for duplicated elements

On my form, users can input multiple delegate details. Here's a snippet of the HTML code: <div id="Delegate1" class="clonedInput"> <h4 id="reference" name="reference" class="heading-reference">Delegate #1</h4> ...

jqueryhtmldom

Switching from one Div to another simultaneously by sliding them out and sliding in the replacement Div

I have a situation with multiple divs within an HTML section. I'm looking for assistance in implementing a sliding effect on these div tags, either horizontally (left/right) or vertically (up/down), depending on user preference. The transition should ...

javascriptanimationhtmlslideshow

Assign a class to an element depending on its position using JavaScript/jQuery

<ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul> How can I use jQuery to add a class to the second li element in the list without using an existing class or id? ...

javascriptjqueryhtml

Trouble with Bootstrap accordion staying open even after a different one is chosen

Looking for assistance! I am encountering an issue with using jQuery on Bootstrap. The accordion feature is not functioning correctly as it fails to collapse when another section is selected. https://i.stack.imgur.com/uiZPh.png The problem arises when th ...

phphtmljquerycssbootstrap-4

What is the process of adding CSS effects to a button when a keypress activates it?

Do you have a CSS style that transforms the look of a button when clicked on-page? Want to extend this effect to when the button is activated via keyboard? (In essence, browsers allow activating a button by pressing Tab to give it focus and then hitting S ...

javascriptjqueryhtmlcss

What is the process for clicking a button in Selenium Python that lacks a "select" tag and only becomes clickable after fulfilling certain conditions?

Currently, I am working on automating the process of downloading files. To locate these files, I need to interact with two dropdown menus: one named 'Select Period' where I choose a date, and the other named 'Select File Type' where I s ...

pythonhtmlselenium-webdriverautomationwebdriver

Creating a customized icon scheduling feature with CSS

Creating an icon using CSS that looks like the one below seems to be quite challenging. I attempted to achieve it with this approach, but the result was not satisfactory. https://i.stack.imgur.com/5W7Hj.png .schedule { height: 10px; width ...

htmlcss

Looking to adjust a group of range sliders. Can you help me troubleshoot my code on jsfiddle

I am looking for a way to ensure that my three range sliders all draw from a shared "value pool." For example, if the maximum value is 100 and slider-1 is set to 51, then sliders 2 and 3 should share the remaining value of 49. Currently, when slider 1 is a ...

javascriptjqueryhtml

Effortlessly sleek horizontal navigation bar designed with Liquid CSS

I've been exploring online tutorials to create a responsive horizontal drop-down menu navigation bar using just CSS and HTML. The tutorial process has been smooth so far, but I'm aiming to make my navigation bar fluid so that it adjusts seamlessl ...

htmlcss