The hover effect becomes disabled once the slider is toggled

Question

The hover effect becomes disabled once the slider is toggled

My table has a feature where I can change the background color and other elements using a slider. However, I'm facing an issue where the hover effect on the table stops working when I toggle the slider on or off. I attempted to solve this with a function, but it only works when the slider has not been used. Any help would be greatly appreciated!

Thank you in advance!

Best regards,
Max

javascript html css hover

Answer 1

Answer №1

Firstly: The issue arises when you change the tr on hover but modify the tds with the slider, causing the original background-color of the table row to be obscured by the new color applied to the cells. To rectify this, define the hover effect for the cells as follows:

#indexOverviewTable tr:hover td { ... }

Moreover, the CSS styles are being overridden by inline styles set using JavaScript. Therefore, it is recommended to define the styles with CSS for a class (e.g., body.dark) and then toggle that class with JavaScript.

Here is an example of CSS implementation:

.dark #indexOverviewTable th {
  background-color: #2a0059;
}

Additionally, defining a background-color for #indexOverviewTable tr.header is unnecessary as it is not visible in this instance - the th elements are covering it.

Here is a working example: (I simplified by removing :nth-child(even) and :nth-child(odd) as it was only one row)

function CheckSlider() {
  var slider = document.getElementById("colorSlider");

  if (slider.checked == true) {
    document.body.classList.add('dark');
  } 
  else {
    document.body.classList.remove('dark');
  }
}

body {
  background-color: whitesmoke;
}

body.dark {
  background-color: #2e2e2e;
}

#indexOverviewTable {
  padding-top: 1em;
  border: 2px solid white;
  font-family: Cenury Gothic;
}

#indexOverviewTable th {
  background-color: blue;
  color: white;
  font-size: 115%;
}

.dark #indexOverviewTable th {
  background-color: #2a0059;
}

#indexOverviewTable td {
  background-color: white;
  color: black;
}

.dark #indexOverviewTable td {
  background-color: #474747;
  color: whitesmoke;
}

#indexOverviewTable tr:hover td {
  background-color: #999999;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
...

<label class="switch">
  <input type="checkbox" id="colorSlider" onclick="CheckSlider()">
  <span class="slider round"></span>
...
</table>

Answer 2

Firstly: The issue arises when you change the tr on hover but modify the tds with the slider, causing the original background-color of the table row to be obscured by the new color applied to the cells. To rectify this, define the hover effect for the cells as follows:

#indexOverviewTable tr:hover td { ... }

Moreover, the CSS styles are being overridden by inline styles set using JavaScript. Therefore, it is recommended to define the styles with CSS for a class (e.g., body.dark) and then toggle that class with JavaScript.

Here is an example of CSS implementation:

.dark #indexOverviewTable th {
  background-color: #2a0059;
}

Additionally, defining a background-color for #indexOverviewTable tr.header is unnecessary as it is not visible in this instance - the th elements are covering it.

Here is a working example: (I simplified by removing :nth-child(even) and :nth-child(odd) as it was only one row)

function CheckSlider() {
  var slider = document.getElementById("colorSlider");

  if (slider.checked == true) {
    document.body.classList.add('dark');
  } 
  else {
    document.body.classList.remove('dark');
  }
}

body {
  background-color: whitesmoke;
}

body.dark {
  background-color: #2e2e2e;
}

#indexOverviewTable {
  padding-top: 1em;
  border: 2px solid white;
  font-family: Cenury Gothic;
}

#indexOverviewTable th {
  background-color: blue;
  color: white;
  font-size: 115%;
}

.dark #indexOverviewTable th {
  background-color: #2a0059;
}

#indexOverviewTable td {
  background-color: white;
  color: black;
}

.dark #indexOverviewTable td {
  background-color: #474747;
  color: whitesmoke;
}

#indexOverviewTable tr:hover td {
  background-color: #999999;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
...

<label class="switch">
  <input type="checkbox" id="colorSlider" onclick="CheckSlider()">
  <span class="slider round"></span>
...
</table>

Answer 3

Answer №2

This behavior is considered as the default one, but the good news is that it can easily be modified using CSS.

To make the necessary change, simply include the important rule in the hover style.

#indexOverviewTable tr.header,
#indexOverviewTable tr:hover {
  background-color: #999999 !important;
}

While using !important may solve the issue, it's generally considered a bad practice and should be avoided due to its negative impact on stylesheet cascading and debugging. In case of conflicting declarations with the !important rule, the one with higher specificity will take precedence.
_{MDN Web Docs | Specifity}

Another issue in the code is that the tr element is styled with hover, while tableData is actually assigned to a td element.

tableData = document.getElementById('indexOverviewTable').getElementsByTagName('td')

^{It's recommended to use querySelectorAll as it offers a more concise approach.}

function CheckSlider() {
  var slider = document.getElementById("colorSlider");

  if (slider.checked == true) {
    document.body.style.background = '#2e2e2e';
    ChangeTableColor('#2a0059', '#474747', 'white');
  } 
  else {
    document.body.style.background = 'whitesmoke';
    ChangeTableColor('blue', 'white', 'black');
  }
}

function ChangeTableColor(tableHeaderColor, tableDataColor, tableFontColor) {
  var tableHeader = document.getElementById('indexOverviewTable').getElementsByTagName('th');
  var tableData = document.getElementById('indexOverviewTable').getElementsByTagName('tr');

  for (var i = 0; i < tableHeader.length; i++) {
    tableHeader[i].style.backgroundColor = tableHeaderColor;
  }
  for (var j = 0; j < tableData.length; j++) {
    tableData[j].style.backgroundColor = tableDataColor;
    tableData[j].style.color = tableFontColor;
  }
}

#indexOverviewTable {
  border: 2px solid white;
  font-family: Cenury Gothic;
}

#indexOverviewTable th {
  background-color: #2a0059;
  color: white;
  font-size: 115%;
}

#indexOverviewTable tr:nth-child(even) {
  background-color: #474747;
  color: whitesmoke;
}

#indexOverviewTable tr:nth-child(odd) {
  background-color: #696969;
  color: white;
}

#indexOverviewTable tr.header,
#indexOverviewTable tr:hover {
  background-color: #999999 !important;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

...

...

Interactive Code

Answer 4

This behavior is considered as the default one, but the good news is that it can easily be modified using CSS.

To make the necessary change, simply include the important rule in the hover style.

#indexOverviewTable tr.header,
#indexOverviewTable tr:hover {
  background-color: #999999 !important;
}

While using !important may solve the issue, it's generally considered a bad practice and should be avoided due to its negative impact on stylesheet cascading and debugging. In case of conflicting declarations with the !important rule, the one with higher specificity will take precedence.
_{MDN Web Docs | Specifity}

Another issue in the code is that the tr element is styled with hover, while tableData is actually assigned to a td element.

tableData = document.getElementById('indexOverviewTable').getElementsByTagName('td')

^{It's recommended to use querySelectorAll as it offers a more concise approach.}

function CheckSlider() {
  var slider = document.getElementById("colorSlider");

  if (slider.checked == true) {
    document.body.style.background = '#2e2e2e';
    ChangeTableColor('#2a0059', '#474747', 'white');
  } 
  else {
    document.body.style.background = 'whitesmoke';
    ChangeTableColor('blue', 'white', 'black');
  }
}

function ChangeTableColor(tableHeaderColor, tableDataColor, tableFontColor) {
  var tableHeader = document.getElementById('indexOverviewTable').getElementsByTagName('th');
  var tableData = document.getElementById('indexOverviewTable').getElementsByTagName('tr');

  for (var i = 0; i < tableHeader.length; i++) {
    tableHeader[i].style.backgroundColor = tableHeaderColor;
  }
  for (var j = 0; j < tableData.length; j++) {
    tableData[j].style.backgroundColor = tableDataColor;
    tableData[j].style.color = tableFontColor;
  }
}

#indexOverviewTable {
  border: 2px solid white;
  font-family: Cenury Gothic;
}

#indexOverviewTable th {
  background-color: #2a0059;
  color: white;
  font-size: 115%;
}

#indexOverviewTable tr:nth-child(even) {
  background-color: #474747;
  color: whitesmoke;
}

#indexOverviewTable tr:nth-child(odd) {
  background-color: #696969;
  color: white;
}

#indexOverviewTable tr.header,
#indexOverviewTable tr:hover {
  background-color: #999999 !important;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

...

...

Interactive Code

The hover effect becomes disabled once the slider is toggled

Answer №1

Answer №2

Similar questions

``There seems to be an issue with CSS Transform/Transition not functioning properly

Choose an image and save the selection information for the following page (Tarot card)

Highest Positioned jQuery Mobile Section

How can I dynamically insert a variable string into a link tag using React and TypeScript?

The property 1 cannot be added because the object is not extendable in React

Telerik Nested perspective

Sort products by the subcategory in Firebase

What is the process for obtaining the number of video views using the YouTube API?

React Highchart issue: The synchronized chart and tooltip are failing to highlight the data points

What is the best way to insert a new row into a table upon clicking a button with Javascript?

Verify that the computer is connected to the Internet by sending an ajax request to Google

What causes the disappearance of connecting lines after pushing content into a tab?

Using Selenium Webdrivers to Browse Pages with Minimal Resource Loading

Ways to avoid automatic error correction when running npm lint?

Sass compilation failed due to an error in the CSS code provided

jQuery - Navbar with both horizontal and vertical orientation

JavaScript Error Caused by Newline Characters

Can a nofollow attribute be added to concealed modal content in Bootstrap?

Angular - a simple method to determine the number of non-empty inputs in a complex template-driven form

Displaying the error message "No results found" in PHP AJAX live search with multiple values is not possible