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

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;
}