Eliminate the table background effect on hover using HTML and CSS

If you need assistance with a contact form, please visit this link.

There seems to be an issue with the hover effect on the fields causing them to turn dark grey. This may not align with your desired plain white background. You can view a screenshot https://i.sstatic.net/gd76J.png

To remove the dark grey background and disable the hover effect, you can make some adjustments in the CSS code provided below:

<style type="text/css">
    // Add your custom styles here to achieve the desired look
</style>

You can further inspect and modify the code using Google Chrome's inspector tool.

We hope this solution helps you! Feel free to reach out if you need more guidance.

Thank you!

Answer №1

The issue causing the hover effect in CSS can be identified by the code snippet below:

table:not(.shop_table) > tbody > tr:hover > td { background-color: #454545 }

If you remove this, the table will have a blue background color like so:

table:not(.shop_table) > tbody > tr:hover > td { background-color: #46a5e5 }

To address this, you have two options. You can either change the background-color to #fff or add the following:

table.background > tbody > tr:hover > td { background-color: #fff }

Your decision on how to proceed should consider if modifying the existing styles will impact other elements negatively. If changing the background color interferes with other site elements, adding a unique class to the table like "monkey" is recommended:

Initially:

<table class="background" style="width: 100%; height: 100%" cellspacing="0" cellpadding="10">

Modify to:

<table class="background monkey" style="width: 100%; height: 100%" cellspacing="0" cellpadding="10">

Additionally, insert a new style definition into your stylesheet:

table.monkey > tbody > tr:hover > td { background-color: #fff }

Answer №2

Your CSS code currently has a background-color of #656565 applied to numerous selectors. Due to the high level of nested tables, this color is being triggered for every nested row hover through the selector: "table:not(.shop_table)>tbody>tr:hover>td". This means that not only the desired cell but also its parent cells are all changing to the background color. To address this issue, it is important to use more specific selectors. Luckily, in your case, you already have more specific class names assigned to individual tables: table.infusion-field-container>tbody>tr:hover>td

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

Do not delete blank notes upon saving

Issue: When multiple notes are created simultaneously, and the same text is entered in the first note and saved, the blank remaining notes are not removed upon page reload or refresh. How can I ensure that empty notes are deleted and only notes with conten ...

Navigate to specific location within a hidden overflow

<ul id="the-list" style="overflow:hidden;height:100px;> <li><a id="link1" href="#">Link 1</a></li> <li><a id="link2" href="#">Link 2</a></li> <li><a id="link3" href="#">Link 3< ...

Tips for expanding the range of values using the pattern attribute

I am currently working on an input form that includes a pattern attribute. I have noticed that I can assign a specific value like this: pattern="2222" While this restricts the input field to only accept that value, I am now looking to add multiple values ...

What is the best way to incorporate a gratitude note into a Modal Form while ensuring it is responsive?

Currently, I have successfully created a pop-up form, but there are two issues that need fixing. The form is not responsive. After filling/submission, the form redirects to a separate landing page for another fill out. Expected Outcome: Ideally, I would ...

Creating dynamic web content using PHP and JavaScript

I stumbled upon a tutorial on the PHP.net website within the "PHP and HTML" manual which includes an example titled Generating JavaScript with PHP. Currently, I am experimenting with a basic demo of this concept on my own to grasp the process before attem ...

Tips for including a line within a circular canvas

My progress bar crafted with css, javascript and html looks great (left image). However, I'm facing a challenge in adding white color dividers to enhance the appearance of the progress bar as shown in the image on the right. Despite my various attemp ...

The inline $Emit function is not generating the correct random number when using Math.random()

I've been diving into the concept of $emit event in Vue and came across this tutorial: . I tried implementing something similar using Vue2.js, but every time I click the button, it gives me a rounded number instead of a random number like in the guide ...

Expansive picture feature within jQuery Mobile

I need help with displaying a large image (685 × 900, only 25kb in PNG) in the 'content' section so that it adjusts automatically for different screen sizes and allows users to zoom in using their fingers. Currently, I have this code: < ...

Extracting information from the 'View all responses' feature

I've been attempting to extract reviews from the following website: . Each review contains 5 ratings such as value for money and customer service. However, most of the information is initially hidden behind a 'See all Answers' button, restri ...

Display corresponding div elements upon clicking an HTML select option

Is there a way to make a div visible when a corresponding select option is clicked, while hiding others? My JavaScript skills are lacking in this area. CSS #aaa, #bbb, #ccc { display:none; } The HTML (I'm using the same id name for option and d ...

Modify the appearance of a nested div using CSS hover on the main JSX container

Within the material-ui table component, I am dynamically mapping rows and columns. The className is set to clickableRow. The TableRow also includes a hover options div on the right side: const generateTableHoverOptions = () => { if (selected) { ...

Tips on utilizing jquery slideDown alongside appendTo

I am currently utilizing an ajax request to retrieve records from the database and then appending the data in HTML. However, I want the HTML to slide down once the data has been appended, but I'm unsure of how to achieve this. Below is the ajax metho ...

What is the best way to display an overlay internal link on top of the current one after it has been clicked

I am looking to create a button that, when clicked, will slide in a different page link and modify the URL to cover 80% of the website, while keeping the previous page in the background. Upon closing, the URL will revert back to the original one. I have c ...

How do I ensure all columns have equal heights?

I have tried using flexbox, but the column heights are still not the same. I have looked at various methods on websites like W3Schools and Medium, but none of them seem to work. Initially, using the flex method worked, but it seems to be disappearing when ...

What are the steps to create two frames using Twitter Bootstrap?

I'm just starting to work with Twitter Bootstrap and I need some help. Can someone assist me in creating a two-column layout inside the HTML, where the menu in the header stays visible even when scrolled down? I've included my HTML code below. Th ...

Guide to incorporating a shiny application into an Rmarkdown HTML file

Currently, I am trying to craft an HTML document using RMarkdown that includes text, R code, and a Shiny application embedded within it. In my attempts, I considered using the asis=TRUE for the shinyApp(ui, server) block. However, I discovered that RStud ...

incorporating additional lines into the datatable with the help of jquery

I am attempting to directly add rows to the datatable by assigning values in the .js file through the Metronic theme. However, despite displaying item values during debugging, the values are not being added to the datatable row array and thus not reflect ...

The transparent DIV/waiting message may not be displayed in IE10

Here is a DIV container that serves as a transparent background with a loading message. This is the HTML code for the DIV container: <div id="generatingexcel" style="display:none; position: fixed; width: 100%;height: 100%; z-index: 999; top: 0; left: ...

Adjusting Text Width in fabric.js: A How-To Guide

In my experience, I have found that setting textAlign for a fabric.js Text object seems to be ineffective because the textfield's width is automatically adjusted to fit the text perfectly. I searched through the API but couldn't find any way to ...

Is the table scrollable within the tbody tag?

Is it possible to create a table with a scrollbar on the right side using only CSS and without any plugins like jQuery? Additionally, I want the table header to remain fixed in place. What steps do I need to take to achieve this functionality? ...