The background hue concealing the shadow of another box

Question

The background hue concealing the shadow of another box

I am facing an issue with my table styling where I want to apply a box-shadow effect when hovering over a row. However, despite setting the z-index accordingly, the background color of the td elements ends up covering the box-shadow, resulting in the hover effect not being visible.

Is there a way to resolve this conflict and have both background-color for the td elements and a box-shadow effect on row hover?

You can see the problem in action in this simple jsfiddle: https://jsfiddle.net/pjz43a52/

When you hover over a row, you'll notice that the box-shadow appears behind the other rows due to the z-index. If you remove the line for the td background-color, everything works as expected:

table td {
  /* background-color: #EFEFEF; */
  z-index: 1;
}

Any insights on why this behavior occurs would be appreciated!

html css z-index box-shadow

Answer 1

Answer №1

The reason behind this situation is that the td element is nested within the tr element. When your CSS code assigns a higher z-index value to the tr element compared to the td element on hover, the tr element will be displayed above its neighboring cells, creating a shadow effect on them. However, the shadow cannot be cast on its own child td elements as they are also elevated along with their parent.

To resolve this issue, you must ensure that the parent row appears above its children. One approach to achieve this is by setting the z-index of the td elements to -1 and removing all z-index values from the tr elements. Although this method allows the row's shadow to display over all cells, including its children, it may result in poor rendering in Chrome and Firefox.

In order for this solution to work effectively, it is crucial that every element impacted by a z-index modification has its position property set to a value other than static.

table tr {
  position: relative;
}

table td {
  position:relative;
  background-color: #EFEFEF;
  z-index: -1;
}

table tr:hover {
  position: relative;
  box-shadow: 
    inset 5px 0 0 #dadce0, 
    inset -3px 0 0 #dadce0, 
    0 5px 2px 0 rgba(60,64,67,.3), 
    0 5px 3px 1px rgba(60,64,67,.15);
}

Answer 2

The reason behind this situation is that the td element is nested within the tr element. When your CSS code assigns a higher z-index value to the tr element compared to the td element on hover, the tr element will be displayed above its neighboring cells, creating a shadow effect on them. However, the shadow cannot be cast on its own child td elements as they are also elevated along with their parent.

To resolve this issue, you must ensure that the parent row appears above its children. One approach to achieve this is by setting the z-index of the td elements to -1 and removing all z-index values from the tr elements. Although this method allows the row's shadow to display over all cells, including its children, it may result in poor rendering in Chrome and Firefox.

In order for this solution to work effectively, it is crucial that every element impacted by a z-index modification has its position property set to a value other than static.

table tr {
  position: relative;
}

table td {
  position:relative;
  background-color: #EFEFEF;
  z-index: -1;
}

table tr:hover {
  position: relative;
  box-shadow: 
    inset 5px 0 0 #dadce0, 
    inset -3px 0 0 #dadce0, 
    0 5px 2px 0 rgba(60,64,67,.3), 
    0 5px 3px 1px rgba(60,64,67,.15);
}

The background hue concealing the shadow of another box

Answer №1

Similar questions

Trouble with CSS: struggling to remove the bullet point from the <li> tag

Loop through a list of form names using ng-repeat and send each form name to a JavaScript function when clicked

A step-by-step guide on accessing and displaying local Storage JSON data in the index.html file of an Angular project, showcasing it on the

The initial value set for the innerHTML property of a div element

What strategies can be implemented to enhance accessibility for custom table behavior?

Troubleshooting: Why are my Angular 8 Carousel Slide Animations not functioning

What is the reason for min-content not being compatible with auto-fill or auto-fit?

Creating a range using v-for directive in Vue

Is there a way for me to determine which .js script is modifying a particular HTML element?

Is it possible to change the background color of the scrolling page?

What could be the reason for my React/HTML select element occasionally failing to display the default selected value?

Combining CSS and HTML with IE10

Quicker loading times for background images when creating PDFs using wkhtmltopdf

Browsing a website to gather multiple pieces of information from it

Comparing currency to double in handlebars: a comprehensive guide

unable to see the new component in the display

Adding elements to a roster

Creating a dynamic 2x2 grid with centered responsiveness in Angular Ionic framework

Navigate one level up or down from the current tag that contains a specified value by utilizing Scrapy

Troubleshooting Issues with CSS3PIE and border-radius