Question

我正在尝试使用图像进行选择以替换单选按钮。

到目前为止，我有这个有效的代码......

<table width="200">
<tr>
<td><label>
<input type="radio" name="RadioGroup1" value="111" id="RadioGroup1_0" style="display:none">
<img src="images/AddressBook-Black-128x128.png" width="128" height="128"> </label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="RadioGroup1" value="222" id="RadioGroup1_1" style="display:none">
<img src="images/AddressBook-Red-128x128.png" width="128" height="128"></label></td>
</tr>
</table>

如何在所选项目周围添加橙色边框？然后在图像中间添加一个工具提示，当选择“悬停”时，用黑色方框和白色文本中的“红色书”字样添加？

总共有16个项目，每个项目都有不同的形象。

Answer 1

你的意思是这样吗？

http://jsfiddle.net/coma/zYVz8/16/

<强> HTML

<div class="options">
    <label title="Baseball Cap">
        <input type="radio" name="foo"/>
        <img src="http://tshirtbangkok.com/wp-content/uploads/cap-baseball-100x100.jpg"/>
    </label>
</div>

<强> CSS

div.options {
    background-color: #FFF7C0;
    padding: 10px 5px 5px 10px;
}

div.options:after {
    content: "";
    display: block;
    clear: both;
}

div.options > label {
    display: block;
    float: left;
    margin: 0 5px 5px 0;
    overflow: hidden;
    cursor: pointer;
}

div.options > label > img {
    display: block;
    border: 2px solid #eee;
}

div.options > label > input {
    position: absolute;
    top: -100px;
}

div.options > label > input:checked + img {
    border-color: #51A351;
}

单选按钮到图像并使用工具提示将鼠标悬停在值上

1 个答案: