Search code examples
csswebkitcss-tables

Table Row Box-Shadow on Hover (Webkit)

Is this possible?

My code works on Firefox. I can also get webkit to change other properties (e.g. background color, etc.) on hover, but the box shadow doesn't take effect:

tr:hover {
    -webkit-box-shadow: 0px 2px 4px #e06547;
    -moz-box-shadow: 0px 2px 4px #e06547;
    box-shadow: 0px 2px 4px #e06547;
    background-color: #d4d5d6;
}
Solution

  • As answered here: https://stackoverflow.com/a/11002077/1106393 rather than styling tr you should style the td-element in combination with the pseudo classes :first-child and :last-child. Prepending tr:hover will do the trick for you:

    tr:hover td {
    -moz-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:first-child {
    -moz-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:last-child {
    -moz-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}

    Demo 1 with inset: http://jsfiddle.net/Kk6Th/

    Update:
    Demo 2 without inset (classic drop shadow): http://jsfiddle.net/2nw4t/1/
    Demo 3 without inset (glow effect): http://jsfiddle.net/2CSuM/