Search code examples
javascriptcssimagecss-tables

z-index hover border change

I'm trying to add a transparent border on hover to the td below the table above. Trying to recreate the effect thats on top. I'm unsure if this is possible with CSS and I might have to intervene with Javascript/jQuery.

Secondly I'm trying to improve the load time from all of the images. If anyone has any suggestions that would be great.

Here is the example

Solution

  • If the border is transparent then it's not going to show. Nothing will be different visually.

    If i understand what you are trying to do, try this:

    table#table_01 td:hover {
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}