CSS：点击改变 div，里面有可点击的按钮。 :focus 与 tabindex，可能吗？
CSS: click-to-mutate div, with clickable buttons inside. :focus with tabindex, possibly?
在搜索：CSS只有，或者可以理解，小jquery。我已经用 ":focus" 和 "tabindex="1"" 在 CSS 中写出了我想要的内容。
Objective:
- 点击 div = div 展开。 （注意：大量 CSS 更改多个元素）
- 扩展 div 里面有子按钮。
- 子按钮可点击。
这对“:focus”和 "tabindex="1“”非常有效，但是单击 div 内的 link 会移除焦点，并反转 div扩容。我认为这个解决方法有效。但是没有。
这是我创建的 JSfiddle（这是用于网络漫画网站上的存档页面。）我保留了所有样式，因此您可能会确切地理解我的意图：
https://jsfiddle.net/gvs291wf/1/
.comicselector {
width: 200px;
height: 200px;
transition: .3s;
margin: 0 auto 45px;
display: flex;
}
.comicselector:hover {
box-shadow: -5px 0px 20px 10px hsla(0, 0%, 0%, .4), 5px 0px 20px 10px hsla(0, 0%, 0%, .4);
}
.comicselector:focus {
width: 400px;
height: 500px;
outline-width: 0;
box-shadow: -30vw 0 0px 0px hsla(280, 0%, 10%, 0.5), 30vw 0 0px 0 hsla(280, 0%, 10%, 0.5);
z-index: 101;
cursor: default;
}
.comimg {
flex: 1;
display: flex;
flex-direction: column;
background: #840;
}
.comimgtitle {
font-family: 'Days One', sans-serif;
font-size: 3em;
font-weight: 800;
text-shadow: 0px 2px 15px hsla(0, 0%, 0%, 1);
margin: auto;
transition: 0.3s;
}
.comicselector:focus .comimgtitle {
opacity: 0;
font-size: 0;
}
.comimgauthor {
font-size: 2em;
font-weight: 800;
text-shadow: 0px 2px 15px hsla(0, 0%, 0%, 1);
font-variant: small-caps;
margin: auto;
transition: 0.3s;
}
.comicselector:focus .comimgauthor {
opacity: 0;
font-size: 0;
}
.cominfo {
flex: 0;
background: hsla(190, 50%, 45%, 1);
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
transition: .4s;
}
.comicselector:focus .cominfo {
flex: 1;
}
.infochild {
font-size: 0;
transition: 0s;
}
.comicselector:focus .infochild {
margin: auto;
z-index: 110;
transition: .5s;
}
.comictitle {
padding: 20px 0;
}
.comicselector:focus .comictitle {
font-size: 3em;
text-shadow: 0px 4px 20px hsla(0, 0%, 35%, .4);
}
.comicselector:focus .comicauthor {
font-weight: 700;
font-size: 2em;
letter-spacing: 0.2em;
text-indent: 0.2em;
pointer-events: none;
}
.comicselector:focus .startbeg {
width: 42%;
min-height: 70px;
background: hsla(0, 0%, 35%, 0.4);
color: #fff;
font-size: 1em;
letter-spacing: 0.2em;
text-indent: 0.2em;
text-decoration: none;
margin: 15% auto 0;
display: flex;
justify-content: center;
align-items: center;
}
.comicselector:focus .startbeg:hover {
text-shadow: 0px 2px 12px hsla(0, 0%, 90%, 0.6);
box-shadow: -230px 0 0px 0px hsla(280, 0%, 10%, 0.1), 230px 0 0px 0 hsla(280, 0%, 10%, 0.1), 0px 0px 24px 6px hsla(0, 0%, 20%, 0.1);
background: hsla(0, 60%, 50%, 1);
}
.comicselector:focus .startlatest {
width: 42%;
min-height: 50px;
background: hsla(260, 0%, 35%, 0.4);
color: #fff;
font-size: 1em;
text-decoration: none;
margin: 1% auto 8%;
display: flex;
justify-content: center;
align-items: center;
}
.comicselector:focus .startlatest:hover {
text-shadow: 0px 2px 12px hsla(0, 0%, 90%, 0.6);
box-shadow: -230px 0 0px 0px hsla(280, 0%, 10%, 0.1), 230px 0 0px 0 hsla(280, 0%, 10%, 0.1), 0px 0px 24px 6px hsla(0, 0%, 20%, 0.1);
background: hsla(260, 60%, 50%, 1);
}
.seriesinfo {
font-size: 0;
opacity: 0;
}
.comicselector:focus .seriesinfo {
opacity: 1;
width: 100%;
box-sizing: border-box;
min-height: 100px;
padding: 30px 10%;
font-size: 1.2em;
line-height: 1.2em;
text-align: center;
background: hsla(260, 0%, 0%, 0.1);
}
.comicselector:focus .eachseriesnav {
width: 100%;
box-sizing: border-box;
padding: 15px 10%;
font-size: 1.2em;
background: hsla(260, 0%, 0%, 0.1);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.comicselector:focus .chapnavlinks {
color: #fff;
text-decoration: none;
padding: 10px 16px;
margin: 2px;
background: hsla(260, 0%, 0%, 0.1);
flex-grow: 1;
transition: 0s;
}
.comicselector:focus .chapnavlinks:hover {
text-shadow: 0px 2px 12px hsla(0, 0%, 90%, 0.6);
box-shadow: 0px 0px 15px 2px hsla(0, 0%, 20%, 0.6);
background: hsla(260, 50%, 45%, 1);
transition: .5s;
}
<div class="comicselector" tabindex="1">
<div class="comimg">
<div class="comimgtitle">Title</div>
<div class="comimgauthor">Author</div>
</div>
<div class="cominfo">
<div class="comictitle infochild">title2</div>
<div class="comicauthor infochild">author2</div>
<a href="#" class="startbeg infochild">Start</a>
<a href="#" class="startlatest infochild">Latest Release</a>
<div class="seriesinfo infochild">comicdescrip
</div>
<div class="eachseriesnav infochild">
<a href="" class="chapnavlinks">Chapter 1,2,etc</a>
</div>
</div>
</div>
谢谢！
我认为这应该符合您的预期。对于每个 .comicselector 都有一个 <label> 控制一个隐藏的单选按钮。当单选按钮为 :checked 时，相应的 .comicselector 具有您希望 :focus 的行为。由于所有单选按钮通过名称属性属于同一组，因此选中一个将取消选中当前选中的那个。
选中单选按钮后，我们会隐藏相应的标签 (display: none)，以防止 .comicselector 通过单击关闭它。
我还添加了一个背景标签，以便从外部关闭所选 .comicselector。
以全页模式观看片段
.bg__label {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.comicselector {
position: relative;
width: 200px;
height: 200px;
transition: .3s;
margin: 0 auto 45px;
display: flex;
}
.comicselector:hover {
box-shadow: -5px 0px 20px 10px hsla(0, 0%, 0%, .4), 5px 0px 20px 10px hsla(0, 0%, 0%, .4);
}
.comicselector__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.check {
position: absolute;
z-index: -1;
visibility: hidden;
}
.check:checked+.comicselector>.comicselector__overlay {
display: none;
}
.check:checked+.comicselector {
width: 400px;
height: 500px;
outline-width: 0;
box-shadow: -30vw 0 0px 0px hsla(280, 0%, 10%, 0.5), 30vw 0 0px 0 hsla(280, 0%, 10%, 0.5);
z-index: 101;
cursor: default;
}
.comimg {
flex: 1;
display: flex;
flex-direction: column;
background: #840;
}
.comimgtitle {
font-family: 'Days One', sans-serif;
font-size: 3em;
font-weight: 800;
text-shadow: 0px 2px 15px hsla(0, 0%, 0%, 1);
margin: auto;
transition: 0.3s;
}
.check:checked+.comicselector .comimgtitle {
opacity: 0;
font-size: 0;
}
.comimgauthor {
font-size: 2em;
font-weight: 800;
text-shadow: 0px 2px 15px hsla(0, 0%, 0%, 1);
font-variant: small-caps;
margin: auto;
transition: 0.3s;
}
.check:checked+.comicselector .comimgauthor {
opacity: 0;
font-size: 0;
}
.cominfo {
flex: 0;
background: hsla(190, 50%, 45%, 1);
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
transition: .4s;
}
.check:checked+.comicselector .cominfo {
flex: 1;
}
.infochild {
font-size: 0;
transition: 0s;
}
.check:checked+.comicselector .infochild {
margin: auto;
z-index: 110;
transition: .5s;
}
.comictitle {
padding: 20px 0;
}
.check:checked+.comicselector .comictitle {
font-size: 3em;
text-shadow: 0px 4px 20px hsla(0, 0%, 35%, .4);
}
.check:checked+.comicselector .comicauthor {
font-weight: 700;
font-size: 2em;
letter-spacing: 0.2em;
text-indent: 0.2em;
pointer-events: none;
}
.check:checked+.comicselector .startbeg {
width: 42%;
min-height: 70px;
background: hsla(0, 0%, 35%, 0.4);
color: #fff;
font-size: 1em;
letter-spacing: 0.2em;
text-indent: 0.2em;
text-decoration: none;
margin: 15% auto 0;
display: flex;
justify-content: center;
align-items: center;
}
.check:checked+.comicselector .startbeg:hover {
text-shadow: 0px 2px 12px hsla(0, 0%, 90%, 0.6);
box-shadow: -230px 0 0px 0px hsla(280, 0%, 10%, 0.1), 230px 0 0px 0 hsla(280, 0%, 10%, 0.1), 0px 0px 24px 6px hsla(0, 0%, 20%, 0.1);
background: hsla(0, 60%, 50%, 1);
}
.check:checked+.comicselector .startlatest {
width: 42%;
min-height: 50px;
background: hsla(260, 0%, 35%, 0.4);
color: #fff;
font-size: 1em;
text-decoration: none;
margin: 1% auto 8%;
display: flex;
justify-content: center;
align-items: center;
}
.check:checked+.comicselector .startlatest:hover {
text-shadow: 0px 2px 12px hsla(0, 0%, 90%, 0.6);
box-shadow: -230px 0 0px 0px hsla(280, 0%, 10%, 0.1), 230px 0 0px 0 hsla(280, 0%, 10%, 0.1), 0px 0px 24px 6px hsla(0, 0%, 20%, 0.1);
background: hsla(260, 60%, 50%, 1);
}
.seriesinfo {
font-size: 0;
opacity: 0;
}
.check:checked+.comicselector .seriesinfo {
opacity: 1;
width: 100%;
box-sizing: border-box;
min-height: 100px;
padding: 30px 10%;
font-size: 1.2em;
line-height: 1.2em;
text-align: center;
background: hsla(260, 0%, 0%, 0.1);
}
.check:checked+.comicselector .eachseriesnav {
width: 100%;
box-sizing: border-box;
padding: 15px 10%;
font-size: 1.2em;
background: hsla(260, 0%, 0%, 0.1);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.check:checked+.comicselector .chapnavlinks {
color: #fff;
text-decoration: none;
padding: 10px 16px;
margin: 2px;
background: hsla(260, 0%, 0%, 0.1);
flex-grow: 1;
transition: 0s;
}
.check:checked+.comicselector .chapnavlinks:hover {
text-shadow: 0px 2px 12px hsla(0, 0%, 90%, 0.6);
box-shadow: 0px 0px 15px 2px hsla(0, 0%, 20%, 0.6);
background: hsla(260, 50%, 45%, 1);
transition: .5s;
}
<input id="check0" type="radio" name="control" class="check" />
<label for="check0" class="bg__label"></label>
<input id="check1" type="radio" name="control" class="check" />
<div class="comicselector" tabindex="1">
<label for="check1" class="comicselector__overlay"></label>
<div class="comimg">
<div class="comimgtitle">Title</div>
<div class="comimgauthor">Author</div>
</div>
<div class="cominfo">
<div class="comictitle infochild">title2</div>
<div class="comicauthor infochild">author2</div>
<a href="#" class="startbeg infochild">Start</a>
<a href="#" class="startlatest infochild">Latest Release</a>
<div class="seriesinfo infochild">comicdescrip
</div>
<div class="eachseriesnav infochild">
<a href="" class="chapnavlinks">Chapter 1,2,etc</a>
</div>
</div>
</div>
<input id="check2" type="radio" name="control" class="check" />
<div class="comicselector" tabindex="1">
<label for="check2" class="comicselector__overlay"></label>
<div class="comimg">
<div class="comimgtitle">Title</div>
<div class="comimgauthor">Author</div>
</div>
<div class="cominfo">
<div class="comictitle infochild">title2</div>
<div class="comicauthor infochild">author2</div>
<a href="#" class="startbeg infochild">Start</a>
<a href="#" class="startlatest infochild">Latest Release</a>
<div class="seriesinfo infochild">comicdescrip
</div>
<div class="eachseriesnav infochild">
<a href="" class="chapnavlinks">Chapter 1,2,etc</a>
</div>
</div>
</div>
在搜索：CSS只有，或者可以理解，小jquery。我已经用 ":focus" 和 "tabindex="1"" 在 CSS 中写出了我想要的内容。
Objective:
- 点击 div = div 展开。 （注意：大量 CSS 更改多个元素）
- 扩展 div 里面有子按钮。
- 子按钮可点击。
这对“:focus”和 "tabindex="1“”非常有效，但是单击 div 内的 link 会移除焦点，并反转 div扩容。我认为这个解决方法有效。但是没有。
这是我创建的 JSfiddle（这是用于网络漫画网站上的存档页面。）我保留了所有样式，因此您可能会确切地理解我的意图：
https://jsfiddle.net/gvs291wf/1/
.comicselector {
width: 200px;
height: 200px;
transition: .3s;
margin: 0 auto 45px;
display: flex;
}
.comicselector:hover {
box-shadow: -5px 0px 20px 10px hsla(0, 0%, 0%, .4), 5px 0px 20px 10px hsla(0, 0%, 0%, .4);
}
.comicselector:focus {
width: 400px;
height: 500px;
outline-width: 0;
box-shadow: -30vw 0 0px 0px hsla(280, 0%, 10%, 0.5), 30vw 0 0px 0 hsla(280, 0%, 10%, 0.5);
z-index: 101;
cursor: default;
}
.comimg {
flex: 1;
display: flex;
flex-direction: column;
background: #840;
}
.comimgtitle {
font-family: 'Days One', sans-serif;
font-size: 3em;
font-weight: 800;
text-shadow: 0px 2px 15px hsla(0, 0%, 0%, 1);
margin: auto;
transition: 0.3s;
}
.comicselector:focus .comimgtitle {
opacity: 0;
font-size: 0;
}
.comimgauthor {
font-size: 2em;
font-weight: 800;
text-shadow: 0px 2px 15px hsla(0, 0%, 0%, 1);
font-variant: small-caps;
margin: auto;
transition: 0.3s;
}
.comicselector:focus .comimgauthor {
opacity: 0;
font-size: 0;
}
.cominfo {
flex: 0;
background: hsla(190, 50%, 45%, 1);
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
transition: .4s;
}
.comicselector:focus .cominfo {
flex: 1;
}
.infochild {
font-size: 0;
transition: 0s;
}
.comicselector:focus .infochild {
margin: auto;
z-index: 110;
transition: .5s;
}
.comictitle {
padding: 20px 0;
}
.comicselector:focus .comictitle {
font-size: 3em;
text-shadow: 0px 4px 20px hsla(0, 0%, 35%, .4);
}
.comicselector:focus .comicauthor {
font-weight: 700;
font-size: 2em;
letter-spacing: 0.2em;
text-indent: 0.2em;
pointer-events: none;
}
.comicselector:focus .startbeg {
width: 42%;
min-height: 70px;
background: hsla(0, 0%, 35%, 0.4);
color: #fff;
font-size: 1em;
letter-spacing: 0.2em;
text-indent: 0.2em;
text-decoration: none;
margin: 15% auto 0;
display: flex;
justify-content: center;
align-items: center;
}
.comicselector:focus .startbeg:hover {
text-shadow: 0px 2px 12px hsla(0, 0%, 90%, 0.6);
box-shadow: -230px 0 0px 0px hsla(280, 0%, 10%, 0.1), 230px 0 0px 0 hsla(280, 0%, 10%, 0.1), 0px 0px 24px 6px hsla(0, 0%, 20%, 0.1);
background: hsla(0, 60%, 50%, 1);
}
.comicselector:focus .startlatest {
width: 42%;
min-height: 50px;
background: hsla(260, 0%, 35%, 0.4);
color: #fff;
font-size: 1em;
text-decoration: none;
margin: 1% auto 8%;
display: flex;
justify-content: center;
align-items: center;
}
.comicselector:focus .startlatest:hover {
text-shadow: 0px 2px 12px hsla(0, 0%, 90%, 0.6);
box-shadow: -230px 0 0px 0px hsla(280, 0%, 10%, 0.1), 230px 0 0px 0 hsla(280, 0%, 10%, 0.1), 0px 0px 24px 6px hsla(0, 0%, 20%, 0.1);
background: hsla(260, 60%, 50%, 1);
}
.seriesinfo {
font-size: 0;
opacity: 0;
}
.comicselector:focus .seriesinfo {
opacity: 1;
width: 100%;
box-sizing: border-box;
min-height: 100px;
padding: 30px 10%;
font-size: 1.2em;
line-height: 1.2em;
text-align: center;
background: hsla(260, 0%, 0%, 0.1);
}
.comicselector:focus .eachseriesnav {
width: 100%;
box-sizing: border-box;
padding: 15px 10%;
font-size: 1.2em;
background: hsla(260, 0%, 0%, 0.1);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.comicselector:focus .chapnavlinks {
color: #fff;
text-decoration: none;
padding: 10px 16px;
margin: 2px;
background: hsla(260, 0%, 0%, 0.1);
flex-grow: 1;
transition: 0s;
}
.comicselector:focus .chapnavlinks:hover {
text-shadow: 0px 2px 12px hsla(0, 0%, 90%, 0.6);
box-shadow: 0px 0px 15px 2px hsla(0, 0%, 20%, 0.6);
background: hsla(260, 50%, 45%, 1);
transition: .5s;
}
<div class="comicselector" tabindex="1">
<div class="comimg">
<div class="comimgtitle">Title</div>
<div class="comimgauthor">Author</div>
</div>
<div class="cominfo">
<div class="comictitle infochild">title2</div>
<div class="comicauthor infochild">author2</div>
<a href="#" class="startbeg infochild">Start</a>
<a href="#" class="startlatest infochild">Latest Release</a>
<div class="seriesinfo infochild">comicdescrip
</div>
<div class="eachseriesnav infochild">
<a href="" class="chapnavlinks">Chapter 1,2,etc</a>
</div>
</div>
</div>
谢谢！
我认为这应该符合您的预期。对于每个 .comicselector 都有一个 <label> 控制一个隐藏的单选按钮。当单选按钮为 :checked 时，相应的 .comicselector 具有您希望 :focus 的行为。由于所有单选按钮通过名称属性属于同一组，因此选中一个将取消选中当前选中的那个。
选中单选按钮后，我们会隐藏相应的标签 (display: none)，以防止 .comicselector 通过单击关闭它。
我还添加了一个背景标签，以便从外部关闭所选 .comicselector。
以全页模式观看片段
.bg__label {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.comicselector {
position: relative;
width: 200px;
height: 200px;
transition: .3s;
margin: 0 auto 45px;
display: flex;
}
.comicselector:hover {
box-shadow: -5px 0px 20px 10px hsla(0, 0%, 0%, .4), 5px 0px 20px 10px hsla(0, 0%, 0%, .4);
}
.comicselector__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.check {
position: absolute;
z-index: -1;
visibility: hidden;
}
.check:checked+.comicselector>.comicselector__overlay {
display: none;
}
.check:checked+.comicselector {
width: 400px;
height: 500px;
outline-width: 0;
box-shadow: -30vw 0 0px 0px hsla(280, 0%, 10%, 0.5), 30vw 0 0px 0 hsla(280, 0%, 10%, 0.5);
z-index: 101;
cursor: default;
}
.comimg {
flex: 1;
display: flex;
flex-direction: column;
background: #840;
}
.comimgtitle {
font-family: 'Days One', sans-serif;
font-size: 3em;
font-weight: 800;
text-shadow: 0px 2px 15px hsla(0, 0%, 0%, 1);
margin: auto;
transition: 0.3s;
}
.check:checked+.comicselector .comimgtitle {
opacity: 0;
font-size: 0;
}
.comimgauthor {
font-size: 2em;
font-weight: 800;
text-shadow: 0px 2px 15px hsla(0, 0%, 0%, 1);
font-variant: small-caps;
margin: auto;
transition: 0.3s;
}
.check:checked+.comicselector .comimgauthor {
opacity: 0;
font-size: 0;
}
.cominfo {
flex: 0;
background: hsla(190, 50%, 45%, 1);
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
transition: .4s;
}
.check:checked+.comicselector .cominfo {
flex: 1;
}
.infochild {
font-size: 0;
transition: 0s;
}
.check:checked+.comicselector .infochild {
margin: auto;
z-index: 110;
transition: .5s;
}
.comictitle {
padding: 20px 0;
}
.check:checked+.comicselector .comictitle {
font-size: 3em;
text-shadow: 0px 4px 20px hsla(0, 0%, 35%, .4);
}
.check:checked+.comicselector .comicauthor {
font-weight: 700;
font-size: 2em;
letter-spacing: 0.2em;
text-indent: 0.2em;
pointer-events: none;
}
.check:checked+.comicselector .startbeg {
width: 42%;
min-height: 70px;
background: hsla(0, 0%, 35%, 0.4);
color: #fff;
font-size: 1em;
letter-spacing: 0.2em;
text-indent: 0.2em;
text-decoration: none;
margin: 15% auto 0;
display: flex;
justify-content: center;
align-items: center;
}
.check:checked+.comicselector .startbeg:hover {
text-shadow: 0px 2px 12px hsla(0, 0%, 90%, 0.6);
box-shadow: -230px 0 0px 0px hsla(280, 0%, 10%, 0.1), 230px 0 0px 0 hsla(280, 0%, 10%, 0.1), 0px 0px 24px 6px hsla(0, 0%, 20%, 0.1);
background: hsla(0, 60%, 50%, 1);
}
.check:checked+.comicselector .startlatest {
width: 42%;
min-height: 50px;
background: hsla(260, 0%, 35%, 0.4);
color: #fff;
font-size: 1em;
text-decoration: none;
margin: 1% auto 8%;
display: flex;
justify-content: center;
align-items: center;
}
.check:checked+.comicselector .startlatest:hover {
text-shadow: 0px 2px 12px hsla(0, 0%, 90%, 0.6);
box-shadow: -230px 0 0px 0px hsla(280, 0%, 10%, 0.1), 230px 0 0px 0 hsla(280, 0%, 10%, 0.1), 0px 0px 24px 6px hsla(0, 0%, 20%, 0.1);
background: hsla(260, 60%, 50%, 1);
}
.seriesinfo {
font-size: 0;
opacity: 0;
}
.check:checked+.comicselector .seriesinfo {
opacity: 1;
width: 100%;
box-sizing: border-box;
min-height: 100px;
padding: 30px 10%;
font-size: 1.2em;
line-height: 1.2em;
text-align: center;
background: hsla(260, 0%, 0%, 0.1);
}
.check:checked+.comicselector .eachseriesnav {
width: 100%;
box-sizing: border-box;
padding: 15px 10%;
font-size: 1.2em;
background: hsla(260, 0%, 0%, 0.1);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.check:checked+.comicselector .chapnavlinks {
color: #fff;
text-decoration: none;
padding: 10px 16px;
margin: 2px;
background: hsla(260, 0%, 0%, 0.1);
flex-grow: 1;
transition: 0s;
}
.check:checked+.comicselector .chapnavlinks:hover {
text-shadow: 0px 2px 12px hsla(0, 0%, 90%, 0.6);
box-shadow: 0px 0px 15px 2px hsla(0, 0%, 20%, 0.6);
background: hsla(260, 50%, 45%, 1);
transition: .5s;
}
<input id="check0" type="radio" name="control" class="check" />
<label for="check0" class="bg__label"></label>
<input id="check1" type="radio" name="control" class="check" />
<div class="comicselector" tabindex="1">
<label for="check1" class="comicselector__overlay"></label>
<div class="comimg">
<div class="comimgtitle">Title</div>
<div class="comimgauthor">Author</div>
</div>
<div class="cominfo">
<div class="comictitle infochild">title2</div>
<div class="comicauthor infochild">author2</div>
<a href="#" class="startbeg infochild">Start</a>
<a href="#" class="startlatest infochild">Latest Release</a>
<div class="seriesinfo infochild">comicdescrip
</div>
<div class="eachseriesnav infochild">
<a href="" class="chapnavlinks">Chapter 1,2,etc</a>
</div>
</div>
</div>
<input id="check2" type="radio" name="control" class="check" />
<div class="comicselector" tabindex="1">
<label for="check2" class="comicselector__overlay"></label>
<div class="comimg">
<div class="comimgtitle">Title</div>
<div class="comimgauthor">Author</div>
</div>
<div class="cominfo">
<div class="comictitle infochild">title2</div>
<div class="comicauthor infochild">author2</div>
<a href="#" class="startbeg infochild">Start</a>
<a href="#" class="startlatest infochild">Latest Release</a>
<div class="seriesinfo infochild">comicdescrip
</div>
<div class="eachseriesnav infochild">
<a href="" class="chapnavlinks">Chapter 1,2,etc</a>
</div>
</div>
</div>