How to make :hover affect a non child-element - html

Question

I've tried using the :before and :after pseudos to change the information displayed when hovering over one of the radio buttons. However, due to the fact that they are not child-elements, I can not seem to make it work.
What I'm trying to achieve is:
When you hover over radio button 1, the information1 element shows.
When radio button 1 is in :checked stage, the information1 element needs to remain displayed.
The same for radio button 2.
What am I doing wrong here?
<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

You can accomplish that with a bit of javascript:
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();
});
.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;
}
<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>

Answer 2

Only CSS solution (added code on top), changing the HTML code:
.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;
}
<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>