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:

http://codepen.io/anon/pen/cghwl

you won't able css alone. couldn't find generic javascript solution, created following in jquery. hope helps:

http://jsfiddle.net/uject/1/

$("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

Popular posts from this blog

html - Sizing a high-res image (~8MB) to display entirely in a small div (circular, diameter 100px) -

java - IntelliJ - No such instance method -

identifier - Is it possible for an html5 document to have two ids? -