Ardor Ardor - 1 month ago 12
CSS Question

css mouseover highlight with table rowspan

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'.

Answer

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..*

Comments