jQuery UI Radio Set - 没有Javascript的Hover和Checked状态

Question

由于某种原因，我无法找到适当的方法来调整jQuery UI Radiosets的HOVER和SELECTED状态。

不知道为什么我找不到它，也许有人可以给我一些方向？ 我想改变的是文字在蓝色上的灰色是白色的。 当它被选中时有一个彩色的BORDER而不是灰色。

我确信这很简单，我只是不确定我错过了什么。

另外，我想在不使用Javascript的情况下执行此操作，并且只使用CSS调整...

Answer 1

一旦你知道要使用哪些类，这很容易通过直接CSS。您可以将单选按钮定位为使用.ui-button:hover进行悬停，将活动按钮定位为.ui-state-active。

所以，给出一些像这样的HTML：

<div id="gender">
    <input type="radio" id="radio1" name="radio"><label for="radio1">Male</label>
    <input type="radio" id="radio2" name="radio"><label for="radio2">Female</label>
</div>​

你可以这样做：

#gender .ui-button:hover {
    /* Hover stuff goes here. */
}
#gender .ui-state-active {
    /* Active stuff goes here. */
}

演示：http://jsfiddle.net/ambiguous/4k3eJ/1/