"Even rows are the only ones being highlighted on the table

I created a table that dynamically highlights all odd rows.

To achieve this, I implemented a method to identify the row number and then apply the alt class to those specific rows.

In order to highlight the rows on hover, I added a simple :hover selector in the CSS stylesheet.

Oddly enough, the CSS code works perfectly for highlighting the non-.alt rows but not the ones with the alt class.

Here is the snippet of my CSS code:

.datagrid tr:hover, .datagrid tr.alt:hover {
    background-color:#497A43;
    color:#D3F0D4;
}

Can anyone help me figure out what may be going wrong?

htmlcsshover

Answer №3

rather than

.datagrid tr:hover, .datagrid tr.alt:hover 

{


    background-color:#497A43;


    color:#D3F0D4;


}

try using this instead

.datagrid tr.alt:hover 

{

    background-color:#497A43;

    color:#D3F0D4;


}

This code will change the background color and text color for rows with the "alt" class only when they are hovered over.

I hope this solution was helpful to you.

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

What is the best way to customize the appearance of the material-ui select component using styled-components instead of material-ui classes in a React

I've been facing some challenges while trying to style my material-ui select component using styled-components instead of material- classes. The version I am working with is material-ui/core 4.12.3. When I use the old makeStyles component from materi ...

cssreactjsselectmaterial-ui

Learn how to toggle the display of a div using jQuery, just like the functionality on the popular website

Visit Mashable here Below is the script I am currently using: $(document).ready(function(){ $(".show_hide5").mouseover(function(){ $('.selected').removeClass('selected'); $(this).next().fadeIn("slow").addClass(&apo ...

javascriptjqueryhtml

`I'm having trouble with my PHP variables disappearing after submitting a form (resolved)`

I am new to learning about forms and PHP. Currently, I am experimenting with a simple HTML file from W3Schools that contains the following code: <html> <body> <form action="welcome.php" method="get"> Name: <input type="text" name="na ...

phphtml

Tricky problem with z-index - how to position a CSS3 triangle under the menu

Hey there, thank you for taking the time to look into my issue. I'm currently working on a menu design that I would like to resemble this example: The key feature here is creating triangular shapes on either side and positioning them beneath the men ...

htmlcssz-index

What could be causing this Form to redirect to the incorrect file path?

I recently updated the login menu for my Admin panel. Initially, the login page was named login.php, but I decided to change it to index.php. Even though I made sure to update the action from login.php to index.php, when I click on the login button it st ...

htmlforms

What is the best way to customize the appearance of a mat-checkbox in Angular using Angular Material?

Is there a way to customize the appearance of a mat-checkbox that actually works? I've tried various solutions without success. I attempted to disable view encapsulation and use classes like mdc-checkbox__background, but nothing changed. Even applyin ...

cssangularangular-material

Banner Placement

Is there a way to arrange 3 banners without using absolute positioning? I prefer to use relative positioning so that the footer doesn't overlap with the page. How can I achieve this layout? .bms { height: 810px; left: 0; position: absolute; ...

htmlcss

Issue with displaying Bootstrap modal on top of another modal

Upon clicking the "Click me here" button, a modal pops up and displays a toast message expressing gratitude. The thank you modal should remain open on top of the save modal even after clicking save. However, upon saving, an error message appears: Cannot r ...

javascripthtmljquerybootstrap-5

What's the best way to align divs vertically in a compact layout?

Update The reason I require this specific behavior is to ensure that all my content remains in chronological order, both on the web page and in the HTML structure. This way, even if the layout collapses into a single column on smaller screens, the content ...

javascripthtmlcssvertical-alignment

How can I use Selenium in combination with Python to retrieve the visible text of a selected radio button or checkbox on a webpage?

I am currently working on processing a form where I need to extract the text values of all checked radio buttons. Each line item will have one radio button checked. Here is an example of the HTML structure for a checked radio button: <div style="white ...

pythonhtmlformsseleniumradio-button

What are some techniques for concealing a rendered element retrieved using the fetch API?

Currently, I am grappling with a coding challenge that requires me to extract data from https://jsonplaceholder.typicode.com/users using the fetch API function along with bootstrap and jquery. To display the data in a div element, I utilized the array.map( ...

javascripthtmljquerycssangularjs

Adjusting the options in the subsequent dropdown menu based on the selection made in the initial dropdown menu

I am currently working on select boxes where values are dynamically added through an array. For example, if I have 4 values in the first select box, I only want to display 3 values in the second select box, excluding the value that has already been selecte ...

javascriptjqueryhtml

Hide Details tag only on mobile view

How can I easily close the default opened <details> tag on mobile? I am working with Wordpress. Any suggestions on how to achieve this? <details open> <summary>Details</summary> Something small enough to go unnoticed. </ ...

javascripthtmlcsswordpress

How can login errors be displayed in a Django application?

When I try to log into my website using the custom login page, entering the correct account details allows me access. However, if I input the wrong information, the page just refreshes with the username and password fields empty. Is there a way to display ...

javascripthtmljquerydjangodjango-forms

Uploading files with previews and no option to alter the image dimensions

I am having trouble with resizing an image preview before submitting it. Despite setting the width and height to 1px in both the div and image, it still displays at its normal dimensions. $(function() { var imagesPreview = function(input, placeToIns ...

javascriptjqueryhtmlcssfile-upload

Transition delays in Tailwind CSS when dark mode is activated

My dark mode toggle is functioning with the following CSS: :root { --primary: var(--white); } .dark { --primary: var(--black); } However, when I include the following code: * { @apply transition-colors duration-700; } The background colors of ...

csstailwind-css

Is it possible to utilize a .css file as the origin with @font-face?

Received a shortened path to a Gotham font... https://cloud.typography.com/[path shortened]/css/fonts.css Attempting to use it in a @font-face definition but facing issues with the src format: @font-face { font-family: 'Gotham'; src: url(" ...

cssfontsfont-facecloud.typography

What is the best way to distinguish the Footer from the Content?

While I was honing my skills in crafting a website using only HTML and CSS, I encountered an issue. I couldn't figure out how to place the footer beneath the content properly. My goal was to clearly separate each section - header, content, and footer. ...

htmlcss

Styling the right button of the split button in jQuery Mobile version 1.4.0 using CSS

I was attempting to create a listview with list items that have a button on the right side, much like a jQuery Mobile split button listview. However, I only want the right button to be clickable. The left part of each item should contain a label along with ...

jquerycssjquery-mobilecustomization

Retrieve the string data from a .txt document

I am facing an issue with my script that retrieves a value from a .txt file. It works perfectly fine when the value is a number, but when trying to fetch text from another .txt file, I encounter the "NaN" error indicating it's not a number. How can I ...

javascripthtmlvariablesget