How to set @Html.Checkbox() is checked when clicking the text beside?

I have a line which contains a checkbox and a text. Like this: @Html.Checkbox("cb1") @: My checkbox, and the requirement is: When I hover "My checkbox", the checkbox cb1 is hovered. When I click "My checkbox", cb1 is clicked.

I have tried this, but it doesn't work:

<tr>
     <td>@Html.Checkbox("cb1")</td>
     <td><label id="text">My checkbox</label></td>
</tr>

with CSS:

#text:hover #cb1:hover
{
/* I mean: if #text is hovered, then #cb1 is hovered too. But it doesn't work */
}

Can you help me?