table rows are styled with hover effects and alternating colors using CSS

Styles for even and odd table rows are set, but hovering over the table rows is not working.
Test it out here: http://jsfiddle.net/w7brN/

CSS style :

#table_even tr:hover { background-color:#fffbae!important; } /* hover effect */

#table_even tr:nth-child(odd) td { background-color:#fbfbfb } /* odd rows */
#table_even tr:nth-child(even) td { background-color:#e8ecee } /* even rows */

HTML Codes: 

<table id="table_even" style="width: 100%">
    <tr>
        <td>##</td>
        <td>##</td>
    </tr>
    <tr>
        <td>##</td>
        <td>##</td>
    </tr>
    <tr>
        <td>##</td>
        <td>##</td>
    </tr>
</table>

How can this issue be resolved?

htmlcss

Answer №1

To fix the issue, rearrange the CSS code and include the <td> elements as shown below:

#table_even tr:nth-child(odd) td {
    background-color: #fbfbfb
} /*odd*/
#table_even tr:nth-child(even) td {
    background-color: #e8ecee
} /* even*/
#table_even tr:hover td {
    background-color: #fffbae;
} /* hovering */

In this way, the hover effect will work properly without being overridden by the nth-child rules. Also, make sure to apply the background-color to the <td> instead of the <tr> element.

Answer №3

Why not try this:

$(this:even).style & $(this:odd).style

It could simplify things, don't you think?

Answer №4

To achieve this effect, you can customize the CSS for alternating table rows:

tr {background:#663366;}
tr:hover {background:#FF6633;}
tr.odd {background:#CCCCCC;}

$(document).ready(function () {$("tr:odd").addClass("odd");}):

Check out an example here

Although it may not work perfectly in jsfiddle, it should work well in most browsers.

Cheers!

Answer №5

#table_even tr:hover { background-color:#fffbae!important; } /* hover effect */

Don't forget to include the td. Here is the correct code:

#table_even tr:hover td{ background-color:#fffbae!important; } /* hover effect */

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

Is there a way to remove the unwanted code ​ from the client side of my website?

Upon inspecting the source code of a webpage, I noticed an odd character ​ appearing before the <script> tag on the client side. Strangely, this mysterious character is not present anywhere in the server-side PHP file. I attempted removing a ...

phphtmltwitter-bootstrapsyntax

Error: Timthumb is redirecting to a 404 page when trying to load image

Timthumb has been working perfectly on my live site, but suddenly stopped working on localhost. The image source is written as follows... Although the image opens when I click and open in a new tab, it does not display on the current page... <img src= ...

phphtmltimthumb

Clicking on the icon image that features a Background Video will trigger the video to play in a popup window originating from the same location

A background video is currently playing on the site. When the play icon is clicked, the video should start playing in a popup. The video should start playing continuously from the exact moment and position where it is clicked. Check out the example here. ...

javascriptjquerycsspopuphtml5-video

What methods can be used to keep divs from breaking onto separate lines?

My approach involves using divs to mimic a table structure. Below is the header section of this table: <div id="table-header"> <div id="header-row"> <div class="rate-rule-column s-boarder"> ...

htmlcss

What is the reason behind shadow dom concealing HTML elements when viewed in inspect mode?

https://i.stack.imgur.com/UZM7f.png Monday.com has implemented Shadow Dom to protect its source code. How can I work around this limitation? ...

javascripthtmlcssshadow-dom

How to Extract Minutes in Datatables Timestamps and Apply Custom Styling

Working with Datatables v1.10 Right now, my table is showing a date in the second column in the format 17-04-2019 14:34, which is how it's stored in the database. The filtering and searching functionality are all working as expected. The current HTM ...

javascriptjqueryhtmlcssdatatable

Ways to verify the presence of an element in a list

I found this interesting JS code snippet: ;(function ($) { $('.filter-opts .opt').click(function(){ var selectedName = $(this).html(); $('.append').append('<li>' + selectedName + '</li> ...

javascriptjqueryhtmlcss

Conceal the href element within a designated UL using JavaScript

Is there a way to only hide the href element in a specific UL element, rather than hiding all href elements with the same class name? Let's consider an example HTML code: <ul class="UL_tag"> <li>Text 1</li> <li>Text 2< ...

javascriptjqueryhtmlcsshref

I'm having trouble getting the data to parse correctly in ajax. Can anyone explain why it's not working?

I have implemented a system where an excel file is uploaded using AJAX, and information about the success or failure of the upload is sent from the upload page to the PHP page using json_encode. However, I am facing an issue with accessing this data indivi ...

javascriptphpjqueryhtmlajax

Increasing height for individual Bootstrap cards, without affecting all cards within the same row

I've encountered an issue where I need to increase the height of a single bootstrap card in a tile-module layout without affecting the height of any other cards in the same row. The code snippet below shows the HTML structure I currently have: <div ...

cssbootstrap-4

Creating expandable card components with React and CSS using accordion functionality

I am currently working on creating a card that will expand its blue footer when the "view details" link is clicked to show lorem text. However, I am encountering an issue where the blue bottom of the card does not expand along with the lorem text. You can ...

javascriptcssreactjsstyled-components

Creating a gap in an HTML document with a 'division' element and cascading style sheets

I am struggling to create a blank space between my divs. Despite trying numerous CSS properties such as margin-top, padding-top, and others from various sources online, I have not been successful. The only way I can add space is by using an excessive amou ...

htmlcssweb

Creating a scrolling list group in a single column that moves in sync with another longer column

When working with two columns in Bootstrap, such as col-4 and col-8, how can you ensure that a list-group stays fixed within its column and vertically aligned even when the content in the other column is scrolled down? Dealing with this responsively can b ...

htmlcsstwitter-bootstrapbootstrap-5

Adjusting Spacing Between Characters

I've been looking for a way to convert regular characters (ABC) to full-width characters (ＡＢＣ), but I haven't had any luck so far. That's why I'm turning to you guys for help. Currently, I don't have any JavaScript code writt ...

javascripthtmlcsschar

Click on the radio button to delete all selected entries in the option dropdown

After spending the entire day trying to find a solution, I am still struggling with a simple task - how do I clear all selections from a group of select option drop downs at once without removing them? I want the selections to revert back to their default ...

javascriptjqueryhtmljquery-mobile

Error: Unable to access property 'count.' because it is undefined

componentDidMount(props) { this.interval = setInterval(() => { if (props.count !== 0) { this.stateHandler() } }, 1000) } Encountering an issue with the interval, as the console is displaying the following error: Type ...

javascripthtmlnode.jsreactjs

Difficulty with Bootstrap's media object

When commenting on my blog, the media object is used as shown here: . However, if the comment contains a large object, the media object ends up overlapping the sidebar like in this example: . Any suggestions on how to resolve this issue? Thank you! ...

cssflexboxbootstrap-4media

Need to delete the product page link on WooCommerce?

I am currently working on fixing the one-page checkout process and I need to remove a single product link from a product picture. The goal is to have only the checkout link displayed on this page, specifically within a quickview view. After trying out var ...

phpcsswordpressfunctionwoocommerce

Update content and image when clicking or hovering using Javascript

I have successfully implemented an image change on mouseover using javascript. However, I am facing a challenge in adding a description below the image upon mouseover or click. I do not have much experience with jQuery and would appreciate any help in so ...

javascripthtml

Tips for effectively sizing a logo within a Bootstrap navbar

<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link ...

htmlcssbootstrap-4