Basically when I hover over a row in my table i want the background color of the row to change to say 'black' and the specific cell or td I am hovering over to change to 'red'.
Ie so two events occur when hovering. I know how to do it for one or the other but not both.
Is this possible using jquery?
Thx to everyone for their contribution, I've repped you all.
cfs :
Add a hover listener to all rows and td's that adds and removes a class, then use CSS to style that class differently for a row and cell.\n\nWorking Demo\n\njQuery\n\n$('tr, td').hover(function() {\n $(this).addClass('highlight');\n}, function() {\n $(this).removeClass('highlight');\n});\n\n\nCSS\n\ntr.highlight {\n background-color: red;\n}\n\ntd.highlight {\n background-color: black;\n}\n",
2013-07-29T16:10:26
user2483173 :
If both the row and cell are in the same container, you could attach a mouseover event to that container and modify the children in the handler.",
2013-07-29T16:08:02
Alireza :
$(\"td\").hover(function(){\n $(this).css(\"background-color\", \"red\");\n $(this).parrent('tr').css(\"background-color\", \"black\");\n});\n",
2013-07-29T16:11:11
user2587132 :
Simple CSS is enough:\n\ntr:hover{\n background-color:red\n}\n\ntd:hover{\nbackground-color:blue\n}\n\n\nhttp://jsfiddle.net/nRuXn/1/",
2013-07-29T16:11:20
user2625787 :
$('td').hover( function() {\n $(this).parent().children().css(\"background-color\", \"black\");\n $(this).css(\"background-color\", \"red\")\n});\n\n$('tr').mouseleave( function() {\n $(this).children('td').css(\"background-color\", \"white\");// or whatever\n});\n",
2013-07-29T16:12:59
Armen :
Add some class to that td that you want to be red (lets call that class 'rdClass') and the row 'blkClass':\n\n<table>\n<tr class='rdClass'>\n <td>\n 1\n </td>\n <td class='blkClass'>\n 2\n </td>\n <td>\n 3\n </td>\n</tr>\n</table>\n\n$(document).ready(function () \n{\n $(\".rdClass\").mouseover(function ()\n {\n $(this).css(\"background-color\", \"red\");\n });\n\n $(\".blkClass\").mouseover(function ()\n {\n $(this).css(\"background-color\", \"black\");\n });\n});\n",
2013-07-29T16:08:34