CSS：点击突变div，里面有可点击的按钮。 ：重点与tabindex，可能？

Question

寻找：只有CSS或可理解，小jquery。我已经使用“：focus”和“tabindex =”1“”写出了我在CSS中完全想要的内容。

目标：
- 点击div = div展开。 （注意：多个元素的CSS变化较大）
- 展开的div在里面有子按钮。
- 儿童按钮可点击。

这就像一个魅力与“：焦点”和“tabindex =”1“”，但点击div内的链接去除焦点，并反转div展开。我认为这个解决方法奏效。但是，不。

这里是我所创建的一个的jsfiddle（这是一个webcomics网站的档案页。）我已经离开所有的造型，所以你可以理解正是我打算：

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>

谢谢！

Answer 1

我认为这应该做你想要的。对于每个.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>