How can I make my table rows change color when hovered over without using Javascript? I tried using CSS with the following code:
tr:hover {
background: #000;
}
Unfortunately, this does not work as expected. While td:hover changes the background color of individual cells, I want to highlight the entire table row.
Is there a way to achieve this effect using only CSS and HTML, or do I need to turn to Javascript for a solution?
Styling <tr> elements can be tricky with CSS, one workaround is using tr:hover td {background:#000}
Here is an idea to experiment with:
tr:hover {
background-color: #000;
}
tr:hover td {
background-color: transparent; /* or #000 */
}
I encountered a similar issue:
tr:hover { background: #000 !important; }
The above code did not solve the problem, but by incorporating
tr:hover td { background: transparent; }
into my stylesheet immediately below, I was able to resolve the issue!! The reason for the initial problem was that some TDs already had a background-color set, and I wasn't aware that setting it to TRANSPARENT was necessary for tr:hover to take effect.
In my case, I applied this with specific class names:
.trclass:hover { background: #000 !important; }
.trclass:hover td { background: transparent; }
Thank you for sharing these solutions - they definitely brightened my day!! :)
Here is a simple solution:
tr:hover {
background: #333 !important;
}
If you only want the background color on TD, then use this code:
tr:hover td {
background: #f1f1f1 !important;
}
This code will override any existing colors and apply the new one forcefully.
td:hover tr {background-color:#000;}
tr:hover td.someclass {
background: #EDB01C;
color:#FFF;
}
Highlighting specific cells with the class "someclass" when hovering over a table row.
If you assign an id to the tr element, you can customize its appearance.
tr#uniqueID{
background-color: green;
cursor: pointer;
height: 30px;
}
tr#uniqueID:hover{
background-color: blue;
cursor: pointer;
}
<table width="400px">
<tr id="uniqueID">
<td></td>
</tr>
</table>
Here is a simple solution: Include !important at the end of your CSS rule:
tr:hover { background: #000 !important; }Give it a try
<!- Check out this HTML code -->
<tr onmouseover="mOvr(this,'#ffa');" onmouseout="mOut(this,'#FFF');">
<script>
function mOvr(src,clrOver) {
if (!src.contains(event.fromElement)) {
src.bgColor = clrOver;
}
}
function mOut(src,clrIn) {
if (!src.contains(event.toElement)) {
src.bgColor = clrIn;
}
}
</script>
I'm struggling to figure out where to begin with this problem. My goal is to create a three-column row that can wrap below each other if they cannot fit horizontally. The height of the row should adjust to accommodate the items while maintaining a fix ...
Welcome to my HTML page <html> <head> <title>Using AJAX</title> </head> <script type="text/javascript" src="ajax.js"></script> <body> <form action="searchItems.php" name="searchItem" method="p ...
I recently launched my website which features a series of tabs with unique icons. Some of the icons, labeled as soap-icon, have animated effects while others, categorized under icomoon-icon, do not. Upon checking the console, I discovered that the animati ...
Is there a way to make full-width images in the bootstrap 4 carousel cropped based on position: center, background: cover to prevent scrolling issues? I attempted to follow advice from this webpage but encountered stretching and scroll-bar problems with d ...
My website is time-sensitive and I need it to prioritize displaying the page before loading any custom fonts. Essentially, I want the page to show up initially as if the fonts are not loaded. This way, the custom fonts (if already cached by the browser) w ...
While creating a CSS animation for a responsive menu icon that transforms into an "X" when clicked, I encountered a minor glitch. The top line of the menu icon flickers down by about 1px after the X shape is formed, causing it to continue moving while the ...
I have created a basic HTML file designed to display embedded flash content immediately upon loading, without requiring any prior interaction. Unfortunately, I have encountered an issue in my preferred browser, Opera. The problem seems to be isolated to th ...
I have developed a function that extracts the IP address and saves information from the city_data in GeoIP2(). My goal is to retrieve the Latitude and longitude from the city_data and showcase it on my HTML page. The issue I am facing is the inability to ...
After a user enters login details and the next page loads, the layout shifts as shown in the image below. The entire app layout breaks and the view moves down to accommodate the size of the onscreen keyboard. This issue persists unless the orientation is ...
Greetings to all who are taking the time to review this query! Everything seemed to be going well until I refreshed my code after making numerous changes, and then this issue arose: Dropdown menu lacking color: https://i.sstatic.net/3lz5a.png The color ...
I am attempting to create a calendar where each day changes its background color between blue and green when clicked, using JavaScript and CSS. It should function similar to a toggle feature. The default color is blue, and I have successfully made the days ...
<div id="video-player" data-src="http://www.youtube.com/embed..."></div> Inspect Element - Browser Developer Tools: Error: Access to property 'toString' denied I scanned the entire page (Ctrl+F) and could not find any reference t ...
I am having trouble understanding the solutions provided for my table query. The current table setup is as follows: <table class="table table-bordered make_datatable"> <thead> <tr> <th>SL No</th> ...
I have successfully developed an HTML5 video player with subtitles. Currently, my goal is to allow the user to submit the subtitle text at a specific timestamp to a database. Despite trying various methods, I am facing challenges in fetching the subtitle t ...
Currently utilizing bootstrap 4.0.0-beta.2 and encountering a CSS issue. In the specific layouthttps://i.sstatic.net/7WOGu.png Here is the HTML: <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" re ...
I have a pair of arrays: array one: ( [0] => 2 [1] => 5 ) array two: ( [0] => Sentry [1] => Maxima ) and I'm attempting to create a new array that resembles the following new array: ( ["Sentry"] => 2 ["Maxima ...
I am working on a grid where I need to dynamically change the CSS of one of the columns based on the value from another field in the result set. Instead of simply assigning a class like <td class='class1'> ${firstname} </td> I ...
I'm currently working on a basic Jigsaw puzzle project. To achieve this, I am required to divide the image I've selected into 20 separate pieces. I was wondering if there is a method in Javascript that can automatically cut an image into 20 equal ...
Here are the steps you can follow: 1. Include two div elements on a page with identical class names. 2. Insert two elements within each div, such as paragraphs for illustrative purposes. 3. Change the text color of the first paragraph in each div to red. ...
Is it possible to remove the square border from a checkbox in HTML? ...