如何在选择选项（CSS）后显示单选按钮

Question

当我将鼠标悬停在某个选项的文本上并选中它时，应选中单选按钮。因此，当我选择标签时，复选框将显示为已选中。

我应该添加标签还是将td作为按钮？

.zui-table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table-rounded {
    border: none;
}
.zui-table-rounded thead th {
    background-color: #CFAD70;
    border: none;
    text-shadow: 1px 1px 1px #ccc;
    color: #333;
    float: center;
}
.zui-table-rounded thead th:first-child {
    border-radius: 10px 0 0 0;
}
.zui-table-rounded thead th:last-child {
    border-radius: 0 10px 0 0;
}
.zui-table-rounded tbody td {
    border: none;
    border-top: solid 1px #957030;
    background-color: #EED592;
}
.zui-table-rounded tbody tr:last-child td:first-child {
    border-radius: 0 0 0 10px;
	
}
.zui-table-rounded tbody tr:last-child td:last-child {
    border-radius: 0 0 10px 0;
}

<table class="zui-table zui-table-rounded" align="center">
    <thead>
        <tr>
            <th colspan="4">1.Look at this series: 7, 10, 8, 11, 9, 12, ... What number should come next?</th>
            
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="radio" name="question1" value="lr0101">7</td>
            <td><input type="radio" name="question1" value="lr0102">10</td>
            <td><input type="radio" name="question1" value="lr0103">12</td>
            <td><input type="radio" name="question1" value="lr0104">13</td>
            <!--Option b-->
        </tr>
       
    </tbody>
  </table>

Answer 1

使用标签 - 我假设您实际上并不想在文本悬停时选择？

喜欢这个

<td><label><input type="radio" 
name="question1" value="lr0101">7</label>/td>

或者像这样

<td><input type="radio" id="answer1" 
name="question1" value="lr0101"><label 
for="answer1">7</label>/td>`

Answer 2

＆＃13;

＆＃13;

$('label').each(function(){
  $(this).mouseenter(function(){
    $(this).siblings('input').prop("checked", true)
    });
  $(this).siblings('input').mouseenter(function(){
    $(this).prop("checked", true)
    });
});

＆＃13;

.zui-table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table-rounded {
    border: none;
}
.zui-table-rounded thead th {
    background-color: #CFAD70;
    border: none;
    text-shadow: 1px 1px 1px #ccc;
    color: #333;
    float: center;
}
.zui-table-rounded thead th:first-child {
    border-radius: 10px 0 0 0;
}
.zui-table-rounded thead th:last-child {
    border-radius: 0 10px 0 0;
}
.zui-table-rounded tbody td {
    border: none;
    border-top: solid 1px #957030;
    background-color: #EED592;
}
.zui-table-rounded tbody tr:last-child td:first-child {
    border-radius: 0 0 0 10px;
	
}
.zui-table-rounded tbody tr:last-child td:last-child {
    border-radius: 0 0 10px 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="zui-table zui-table-rounded" align="center">
    <thead>
        <tr>
            <th colspan="4">1.Look at this series: 7, 10, 8, 11, 9, 12, ... What number should come next?</th>
            
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="radio" name="question1" value="lr0101" id="7"><label for="7">7</label></td>
            <td><input type="radio" name="question1" value="lr0102" id="10"><label for="10">10</label></td>
            <td><input type="radio" name="question1" value="lr0103" id="12"><label for="12">12</label></td>
            <td><input type="radio" name="question1" value="lr0104" id="13"><label for="13">13</label></td>
            <!--Option b-->
        </tr>
       
    </tbody>
  </table>

＆＃13;

＆＃13;

＆＃13;