css - Hover on td affect superior tr -
i made table first <tr>
has 2 <td>
(the first rowspan) , second <tr>
has <td>
. want when make hover on <td>
of second <tr>
affect , first <td>
of first <tr>
.
this similar want: http://jsfiddle.net/m3wya/
this code:
<table class="class"> <tr><td rowspan="2">a</td><td>b</td></tr> <tr><td>c</td></tr> </table>
if make hover on b want , b change (it works .class tr:hover{}
) , if make hover on c want , c change in same way.
it's possible make css? don't know how (i know sibling selector can't find how use here.
if it's not possible css how javascript?
this solution:
you won't able css alone. couldn't find generic javascript solution, created following in jquery. hope helps:
$("td").hover(function(){ var $this = $(this); var $thistr = $this.closest("tr"); var $rows = $thistr.parent().children(); // add hover call cells directly in same tr $thistr.find("td").addclass("hover"); // add hover td rowspan making visually part of row var rowindex = $rows.index($thistr[0]); $thistr.prevall("tr:has(td[rowspan])").each(function(){ var index = $rows.index(this); $(this).find("td[rowspan]").each(function(){ var $cell = $(this); if($cell.attr("rowspan") > rowindex - index){ $cell.addclass("hover"); } }); }); }, function(){ $(".hover").removeclass("hover"); });
Comments
Post a Comment