Hello,
here is the issue I'm having.
I'm applying a :hover instruction on a container and it's displaying the same properties over the childs contained on it, while I'd wish that those properties would be applied only on the container itself.
HTML
<section class="activity">
<table>
<tr>
<th class="activity-title">Maintenance d'ordinateurs (PC et Notebook)</th>
<td class="periode"><time datetime="2015-02">Février 2015 - </time><time datetime="2015-05">Mai 2015</time></td>
</tr>
<tr>
<td class="caption" colspan="2">SENAC Brésil</td>
</tr>
</table>
</section>
CSS
.activity {
display: table;
width: 100%;
border-collapse: collapse;
}
.activity :hover {
background-color: #e3e3e3;
border-left: solid 5px #17abb3;
}
here is the issue I'm having.
I'm applying a :hover instruction on a container and it's displaying the same properties over the childs contained on it, while I'd wish that those properties would be applied only on the container itself.
HTML
<section class="activity">
<table>
<tr>
<th class="activity-title">Maintenance d'ordinateurs (PC et Notebook)</th>
<td class="periode"><time datetime="2015-02">Février 2015 - </time><time datetime="2015-05">Mai 2015</time></td>
</tr>
<tr>
<td class="caption" colspan="2">SENAC Brésil</td>
</tr>
</table>
</section>
CSS
.activity {
display: table;
width: 100%;
border-collapse: collapse;
}
.activity :hover {
background-color: #e3e3e3;
border-left: solid 5px #17abb3;
}