Franz Tesca Franz Tesca - 3 months ago 45
CSS Question

Weird :hover behavior when using rowspan

I have a table which uses rowspan and I want to highlight every row when mouse is hovering. So, basic css,

table tr:hover {background-color: yellow;}
, but I get some weird behavior from it: when the mouse gets over the row, it might highlight the whole row or a part of it, randomly. But the real problem for me it's that sometime part of the row remains highlighted even when the mouse is out. Particularly, changing the layout of the table using colspan and rowspan with jquery, makes part of the row remain highlighted.
This is an image of the css problem: weird hover behavior

You can see what I'm talking about in this fiddle



$('.top').click(function(){
var th = $(this);
th.find('td').eq(0).attr('rowspan','1');
th.next('.bottom').find('td').attr('colspan','2');

})

table td {
border: 1px solid black;

}
.top:hover {
background-color: yellow;
}
#hidden {
border: 0;
}
#hidden div {
display: none;
}
p {
height: 600px;
display: block;
}

<table>
<tr class="top"><td rowspan="2">Rowspan #1</td><td>Top text here</td><td rowspan="2">Another rowspan</td></tr>
<tr class="bottom"><td><div>
Bottom-text: here
</div></td></tr>
<tr class="top"><td rowspan="2">Rowspan #2</td><td>Top text here</td><td rowspan="2">Another rowspan</td></tr>
<tr class="bottom"><td><div>
Bottom-text: here
</div></td></tr>
<tr class="top"><td rowspan="2">Rowspan #3</td><td>Top text here</td><td rowspan="2">Another rowspan</td></tr>
<tr class="bottom"><td><div>
Bottom-text: here
</div></td></tr>
<tr class="top"><td rowspan="2">Rowspan #4</td><td>Top text here</td><td rowspan="2">Another rowspan</td></tr>
<tr class="bottom"><td><div>
Bottom-text: here
</div></td></tr>
</table>

<p>

</p>





I actually tested it using IE, Chrome, Opera and Firefox. This "bug" is present on Chrome and Opera, while in IE and Firefox I get the desired behavior.
How can I get the row highlighted as the first image above using just css? Thank you.

Answer

Just the change the :hover effect that you have defined on your CSS and you will easily achieve your desired hover effect.

CSS:

.top:hover * {
  background-color: yellow;
}

Here's the JSFiddle

Comments