如何制作：悬停会影响非子元素

Question

我已尝试使用: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;
}

Answer 1

你可以通过一些javascript实现这一点：

＆＃13;

＆＃13;

function getIndex(elem, attr) {
  return $(elem).attr(attr).substr(5);
}

$('label')
  .mouseover(function(ev) {
    $('.information' + getIndex(ev.currentTarget, 'for')).show();
  })
  .mouseout(function(ev) {
    var index = getIndex(ev.currentTarget, 'for');
    if (!$('#radio' + index).is(':checked'))
      $('.information' + index).hide();
  });

$('input[type=radio]')
  .change(function(ev) {
    $('p').hide();
    $('.information' + getIndex(ev.currentTarget, 'id')).show();
  });

＆＃13;

.information1,
.information2 {
  display: none;
}


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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只有CSS解决方案（在顶部添加代码），更改HTML代码：

＆＃13;

＆＃13;

.information1,
.information2 {
  display: none;
}

input[type="radio"].radio1:hover+label+p,
input[type="radio"].radio2:hover+label+p,
input[type="radio"].radio1:checked+label+p,
input[type="radio"].radio2:checked+label+p {
  display:block;
}


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

＆＃13;

<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>
      <p class="information1">information1</p>
    </div>
    <div class="3u 12u$(xsmall)">
      <input type="radio" class="radio2" id="radio2" name="group">
      <label for="radio2"></label>
      <p class="information2">information2</p>
    </div>
    <div class="12u$">
      <ul class="actions">
        <li><input type="submit" value="Submit" /></li>
      </ul>
    </div>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;