Друзья! У меня есть радиокнопка в ссылке. Сам <input> работает нормально, по ссылке переходит. Но когда я задаю для него display: none; , дабы скрыть и с помощью <label> красиво оформить эти кнопки, переход по ссылке уже не происходит, хотя оба тега завернуты в ссылку. Вопрос: как с помощью <label> переходить по ссылке?
<li>
<a href="{{ page }}/">
<input type="radio" name="point" id="slide1" checked>
<label for="slide1"></label>
</a>
</li>
css:
.paginator a{
text-decoration: none;
}
.paginator li{ display: inline;
}
.paginator label:after {
border: 2px solid black;
content: " ";
display: block;
height: 20px;
left: -4px;
position: absolute;
top: -4px;
width: 20px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
label {
cursor: pointer;
display: inline-block;
height: 15px;
margin: 25px 12px 0 16px;
position: relative;
width: 15px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-transition: background ease-in-out .5s;
-moz-transition: background ease-in-out .5s;
-o-transition: background ease-in-out .5s;
transition: background ease-in-out .5s;
}
label:hover, #slide1:checked ~ label:nth-of-type(1), #slide2:checked ~ label:nth-of-type(2){
background: black;
}
#slide1:checked ~ .slider > .slide1 , #slide2:checked ~ .slider > .slide2{
opacity: 1;
z-index: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }
