Question

我正在尝试使用一个单独的图像精灵用于典型的男/女单选按钮，但它只显示什么，我很难理解原因：

jquery代码：

<script type="text/javascript">
$(function() {
$('input:radio').each(function() {
    $(this).hide();
    $('<a class="radio-fx" href="#"><div class="radio"></div></a>').insertAfter(this);
});
$('.radio-fx').live('click',function(e) {
    e.preventDefault();
      var $check = $(this).prev('input');
      $('.radio-fx div').attr('class','radio');
      $(this).find('div').attr('class','radio-checked');          
      $check.attr('checked', true);
});
});
</script>

我正在尝试的CSS：

    #male .radio {
    background: url(/images_/icons/mf_radio.png) no-repeat;
    background-position: 0 0;
    width: 57px;
    height: 63px;
}

#male .radio:hover {
    background-position: 0 -62px;
}

#male .radio-checked {
    background: url(/images_/icons/mf_radio.png) no-repeat;
    background-position: 0 -124px;
    width: 57px;
    height: 63px;
}

#female .radio{
    background: url(/images_/icons/mf_radio.png) no-repeat;
    background-position: -57px 0px;
    width: 57px;
    height: 63px;
}

#female .radio:hover {
    background-position: -57px -62px;
}

#female .radio-checked {
    background: url(/images_/icons/mf_radio.png) no-repeat;
    background-position: -57px -124px;
    width: 57px;
    height: 63px;
}

最后，html：

<input type="radio" class="radio" id="female" value="Female" />
<input type="radio" id="male" name="gender" value="Male" />

Answer 1

您的问题是，在您的javascript中，您使用＃male /＃female ID隐藏输入元素，并在CSS中将它们用作选择器来设置图形单选按钮的样式。从CSS中删除＃male /＃female或将其添加到您使用javascript创建的HTML中。我们很难说哪个是最好的，因为我们无法看到您正在使用的图像，因此正是您正在努力实现的目标。

这里有一个快速的小提琴： http://jsfiddle.net/7XEnc/9/

Answer 2

它没有显示任何内容，因为您使用$(this).hide()隐藏单选按钮，然后在带有类.radio-fx的单选按钮和子节点之后添加一些锚标记班级.radio。

您的CSS引用嵌套在id（例如#male .radio）中的元素，而不是之后。因此，没有任何内容可以引用CSS中的.radio-fx .radio元素，并且元素本身不包含任何可视内容 - 因此您什么也看不见。

要快速修复CSS，您可以将选择器更改为#id + * > .class，例如#male .radio将变为#male + * > .radio。

您可能还想添加a.radio-fix{ display: block; }，因为您在锚标记中嵌套div。

另外请注意，您应该考虑在锚标记中添加一些文字，因为我相信屏幕阅读器会将其视为空锚标记（现在看到它没有可见内容）。

Answer 3

您需要指定-webkit-appearance: none以使覆盖在Webkit浏览器上生效。

使用css和jquery将图像用作单选按钮

3 个答案: