css mouseover highlight with table rowspan

Question

I have a simple HTML table generated with PHP from a database where in some cases one cell spans over more than one row. As a simple example:

<table>
  <tr class ="highlightRow">
    <td>Cell 1</td>
    <td rowspan="2">Cell over more rows</td>
  </tr>
  <tr class ="highlightRow">
    <td>Cell 2</td>
  </tr>
</table>

I highlight the row the mouse is over with a simple CSS rule:

.highlightRow {
    background-color:       #FFF;
}
.highlightRow:hover {
    background-color:       #EEE;
}

I can not find any solution (that is CSS only) to highlight 'Cell over more rows' when the mouse hovers over 'Cell 2'.

StaleMartyr · Answer 1 · 2015-12-23T10:18:18.677

1

I don't know if this will satisfy your need, but have a look at my solution

.highlightRow {
    background-color:       #FFF;
}

.highlightRow:hover{
    background-color:       #EEE;
}


table:hover .include{
    background-color:       #EEE;
}

<table>
  <tr class ="highlightRow">
    <td>Cell 1</td>
    <td rowspan="2" class="include">Cell over more rows</td>
  </tr>
  <tr class ="highlightRow">
    <td>Cell 2</td>
  </tr>
</table>

Thr trick is to highlight .include cell every time the table has been hovered and add some rule to highlight tr everytime it's hovered.

edited Dec 23 '15 at 10:18

answered Dec 23 '15 at 10:13

StaleMartyr

778
5
18

If we hover cellover more rows means same itself also bg color changed..that is not correct requirement. – iyyappan Dec 23 '15 at 10:30
that is a appropriate solution in case 'cell over more rows' should be highlighted in every case. In my case 'cell over more rows' should only be highlighted if one of the adjacent rows is selected, considered that the table goes on after those two rows. – Ardor Dec 23 '15 at 10:40
Another way to think about this is that you can multiple `tbody` sections one per grouped `rowspan` and then you can do your hover on that. Thanks @StaleMartyr for the basic idea! – Richard Herries Apr 01 '22 at 08:26

score 0 · Accepted Answer · edited May 23 '17 at 11:48

0

I had meet same problems in my projects.We cannot do it.That is why most of all developers perefered jquery DOM traversing methods(parent(),child(),sibling(),next(),prev(),After(),etc..,)

Reference: Is there a CSS parent selector?

Conclusion is :there is no option in CSS for select the parent.we can with javascript help.

**we love coding..*

edited May 23 '17 at 11:48

Community

1
1

answered Dec 23 '15 at 10:05

iyyappan

767
4
11

css mouseover highlight with table rowspan

2 Answers2