Does anyone know of a way to add a border to a table row with a different background color when the mouse hovers over the row?
I've been able to change the background color of the row with this:
$(document).ready(function() {
$(function() {
$('.actionRow').hover(function() {
$(this).css('background-color', '#FFFF99');
},
function() {
$(this).css('background-color', '#FFFFFF');
});
});
});
But I'm unable to add a border color. I realize borders can't be directly applied to a table row tag, but I'm hoping someone know some jQuery voodoo magic that can find the table cells within the selected row and apply some styles to those to create the border.
Thanks!
$(function() {
$('tr').hover(function() {
$(this).css('background-color', '#FFFF99');
$(this).contents('td').css({'border': '1px solid red', 'border-left': 'none', 'border-right': 'none'});
$(this).contents('td:first').css('border-left', '1px solid red');
$(this).contents('td:last').css('border-right', '1px solid red');
},
function() {
$(this).css('background-color', '#FFFFFF');
$(this).contents('td').css('border', 'none');
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With