Html 如何使：悬停影响非子元素

我已经尝试使用

：before

和

：after

伪按钮来更改悬停在其中一个单选按钮上时显示的信息。然而，由于它们不是子元素，我似乎无法使其工作

我想要实现的是：

当您将鼠标悬停在单选按钮1上时，将显示information1元素

当单选按钮1处于：选中阶段时，information1元素需要保持显示

单选按钮2也一样

我做错了什么

<form method="post" action="#">
  <div class="row uniform">
    <div class="3u 12u$(xsmall)">
      <input type="radio" class="radio1" id="radio1" name="group">
      <label for="radio1"></label>
    </div>
    <div class="3u 12u$(xsmall)">
      <input type="radio" class="radio2" id="radio2" name="group">
      <label for="radio2"></label>
    </div>
    <div class="6u 12u$(xsmall)">
      <p class="information1">information1</p>
      <p class="information2">information2</p>
    </div>
    <div class="12u$">
      <ul class="actions">
        <li><input type="submit" value="Submit" /></li>
      </ul>
    </div>
  </div>
</form>

/* Radio1 */

input[type="radio"].radio1 {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  display: block;
  float: left;
  margin-right: -2rem;
  opacity: 0;
  width: 1rem;
  z-index: -1;
}

input[type="radio"].radio1+label {
  border-radius: 4px;
  border: solid 3px;
  border-color: #D2D2D2;
  color: #888;
  display: inline-block;
  background-image: url(radio1.png);
  height: 156px;
  width: 106px;
  line-height: 1.725rem;
  position: relative;
  cursor: pointer;
  text-align: left;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

input[type="radio"].radio1:hover+label {
  border-color: #BBBBBB;
  background-image: url(radio1_hover.png);
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

input[type="radio"].radio1:checked+label {
  background-image: url(radio1_focus.png);
  border-color: #51CCA8;
}

input[type="radio"].radio1:checked+label:before {
  content: '\f00c';
  color: white;
  font-size: 1.5rem;
  background-color: #4DC29F;
  border-radius: 4px;
  border: solid 3px;
  border-color: #4DC29F;
  position: absolute;
  top: 56px;
  left: 33px;
}

/* Radio2 */

input[type="radio"].radio2 {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  display: block;
  float: left;
  margin-right: -2rem;
  opacity: 0;
  width: 1rem;
  z-index: -1;
}

input[type="radio"].radio2+label {
  border-radius: 4px;
  border: solid 3px;
  border-color: #D2D2D2;
  color: #888;
  display: inline-block;
  background-image: url(radio2.png);
  height: 156px;
  width: 106px;
  line-height: 1.725rem;
  position: relative;
  cursor: pointer;
  text-align: left;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

input[type="radio"].radio2:hover+label {
  border-color: #BBBBBB;
  background-image: url(radio2_hover.png);
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

input[type="radio"].radio2:checked+label {
  background-image: url(radio2_focus.png);
  border-color: #51CCA8;
}

input[type="radio"].radio2:checked+label:after {
  content: '\f00c';
  color: white;
  font-size: 1.5rem;
  background-color: #4DC29F;
  border-radius: 4px;
  border: solid 3px;
  border-color: #4DC29F;
  position: absolute;
  top: 56px;
  left: 33px;
}

信息1
信息2



/*无线电1*/
输入[type=“radio”]。radio1{
-moz外观：无；
-webkit外观：无；
-ms外观：无；
外观：无；
显示：块；
浮动：左；
右边距：-2em；
不透明度：0；
宽度：1em；
z指数：-1；
}
输入[type=“radio”]。radio1+标签{
边界半径：4px；
边框：实心3px；
边框颜色：#D2D2D2；
颜色：#888；
显示：内联块；
背景图片：url（radio1.png）；
高度：156px；
宽度：106px；
线高：1.725雷姆；
位置：相对位置；
光标：指针；
文本对齐：左对齐；
-moz转换：所有0.4易入易出；
-webkit过渡：所有0.4s易入易出；
-ms转换：所有0.4s易进易出；
过渡：所有0.4缓进缓出；
}
输入[type=“radio”]。radio1:悬停+标签{
边框颜色：#BBBBBB；
背景图片：url（radio1_hover.png）；
-moz转换：所有0.4易入易出；
-webkit过渡：所有0.4s易入易出；
-ms转换：所有0.4s易进易出；
过渡：所有0.4缓进缓出；
}
输入[type=“radio”]。radio1:选中+标签{
背景图片：url（radio1_focus.png）；
边框颜色：#51CCA8；
}
输入[type=“radio”]。radio1:选中+标签：之前{
内容：'\f00c'；
颜色：白色；
字体大小：1.5rem；
背景色：#4DC29F；
边界半径：4px；
边框：实心3px；
边框颜色：#4DC29F；
位置：绝对位置；
顶部：56px；
左：33像素；
}
/*无线电2*/
输入[type=“radio”]。radio2{
-moz外观：无；
-webkit外观：无；
-ms外观：无；
外观：无；
显示：块；
浮动：左；
右边距：-2em；
不透明度：0；
宽度：1em；
z指数：-1；
}
输入[type=“radio”]。radio2+标签{
边界半径：4px；
边框：实心3px；
边框颜色：#D2D2D2；
颜色：#888；
显示：内联块；
背景图片：url（radio2.png）；
高度：156px；
宽度：106px；
线高：1.725雷姆；
位置：相对位置；
光标：指针；
文本对齐：左对齐；
-moz转换：所有0.4易入易出；
-webkit过渡：所有0.4s易入易出；
-ms转换：所有0.4s易进易出；
过渡：所有0.4缓进缓出；
}
输入[type=“radio”]。radio2:悬停+标签{
边框颜色：#BBBBBB；
背景图片：url（radio2_hover.png）；
-moz转换：所有0.4易入易出；
-webkit过渡：所有0.4s易入易出；
-ms转换：所有0.4s易进易出；
过渡：所有0.4缓进缓出；
}
输入[type=“radio”]。radio2:选中+标签{
背景图片：url（radio2_focus.png）；
边框颜色：#51CCA8；
}
输入[type=“radio”]。radio2:选中+标签：之后{
内容：'\f00c'；
颜色：白色；
字体大小：1.5rem；
背景色：#4DC29F；
边界半径：4px；
边框：实心3px；
边框颜色：#4DC29F；
位置：绝对位置；
顶部：56px；
左：33像素；
}

您可以通过一点javascript来实现这一点：

函数getIndex（元素、属性）{
返回$（elem）.attr（attr）.substr（5）；
}
$（“标签”）
.mouseover（功能（ev）{
$（'.information'+getIndex（ev.currentTarget，'for'））.show（）；
})
.鼠标输出（功能（ev）{
var指数=getIndex（ev.currentTarget，“for”）；
如果（！$（“#收音机”+索引）.is（“：选中”））
$（'.information'+index）.hide（）；
});
$（'input[type=radio]'）
.更改（功能（ev）{
$（'p'）.hide（）；
$（'.information'+getIndex（ev.currentTarget，'id'））.show（）；
});
.information 1，
.信息2{
显示：无；
}
/*无线电1*/
输入[type=“radio”]。radio1{
-moz外观：无；
-webkit外观：无；
-ms外观：无；
外观：无；
显示：块；
浮动：左；
右边距：-2em；
不透明度：0；
宽度：1em；
z指数：-1；
}
输入[type=“radio”]。radio1+标签{
边界半径：4px；
边框：实心3px；
边框颜色：#D2D2D2；
颜色：#888；
显示：内联块；
背景图片：url（radio1.png）；
高度：156px；
宽度：106px；
线高：1.725雷姆；
位置：相对位置；
光标：指针；
文本对齐：左对齐；
-moz转换：所有0.4易入易出；
-webkit过渡：所有0.4s易入易出；
-ms转换：所有0.4s易进易出；
过渡：所有0.4缓进缓出；
}
输入[type=“radio”]。radio1:悬停+标签{
边框颜色：#BBBBBB；
背景图片：url（radio1_hover.png）；
-moz转换：所有0.4易入易出；
-webkit过渡：所有0.4s易入易出；
-ms转换：所有0.4s易进易出；
过渡：所有0.4缓进缓出；
}
输入[type=“radio”]。radio1:选中+标签{
背景图片：url（radio1_focus.png）；
边框颜色：#51CCA8；
}
输入[type=“radio”]。radio1:选中+标签：之前{
内容：'\f00c'；
颜色：白色；
字体大小：1.5rem；
背景色：#4DC29F；
边界半径：4px；
边框：实心3px；
边框颜色：#4DC29F；
位置：绝对位置；
顶部：56px；
左：33像素；
}
/*无线电2*/
输入[type=“radio”]。radio2{
-moz外观：无；
-webkit外观：无；
-ms外观：无；
外观：无；
显示：块；
浮动：左；
右边距：-2em；
不透明度：0；
宽度：1em；
z指数：-1；
}
输入[type=“radio”]。radio2+标签{
边界半径：4px；
边框：实心3px；
边框颜色：#D2D2D2；
颜色：#888；
显示：内联块；
背景图片：url（radio2.png）；
高度：156px；
宽度：106px；
线高：1.725雷姆；
位置：相对位置；
光标：指针；
文本