css单选按钮切换背景

Question

我有单选按钮样式显示为常规按钮。我是这么做的，一旦你点击第一个按钮，第二个按钮就会降低其不透明度。我遇到的问题是，一旦你点击第二个按钮，第一个按钮不会改变不透明度。我已经用jquery完成了这个，但是想用css来完成。

下面有一个例子：http://jsfiddle.net/mahsj3qx/

HTML：

<input type="radio" id="radio01" name="konnect" value="yes"><label for="radio01"><span></span>yes</label> 
<input type="radio" id="radio02" name="konnect" value="no"><label for="radio02"><span></span>no</label><br> 

CSS：

input[type=radio] { 
    display: none; 
} 
input[type=radio] + label { 
    cursor: pointer; 
    float: left; 
    padding: 5px 0; 
    font-size: 18px; 
    color: #ffffff; 
    text-align: center; 
    width: 50%; 
    height: auto; 
    margin-bottom: 10px; 
    vertical-align: middle; 
} 
/* yes */ 
#radio01 + label { 
    background: rgb(46, 204, 113); 
} 
#radio01 + label:hover { 
    background: rgba(46, 204, 113, 0.75); 
} 
#radio01:checked + label { 
    background: rgb(39, 174, 96); 
} 
#radio01:checked ~ label[for="radio02"] { 
    background: rgba(26, 188, 156, 0.25); 
} 
/* no */ 
#radio02 + label { 
    background: rgb(26, 188, 156); 
} 
#radio02 + label:hover { 
    background: rgba(26, 188, 156, 0.75); 
} 
#radio02:checked ~ label[for="radio01"] { 
    background: rgba(46, 204, 113, 0.25); 
} 
#radio02:checked + label { 
    background: rgb(22, 160, 133); 
} 

Answer 1

试试这个demo

#radio01 + label { 
    background: rgba(26, 188, 156, 0.25); 
}