CSS: Click-to-Mutate div, mit anklickbaren Schaltflächen im Inneren. : Fokus mit Tabindex, möglicherweise?

Question

Auf der Suche nach: CSS nur oder verständlich, kleine jquery. Ich habe bereits genau in CSS geschrieben, was ich will, mit ": focus" und "tabindex =" 1 "".

Ziel:
- Klicken Sie auf div = div erweitert. (Hinweis: schweres CSS-Ändern mehrerer Elemente)
- Erweitertes div hat untergeordnete Schaltflächen.
- Kinderschaltflächen anklickbar.

Das funktionierte wie ein Zauber mit ": focus" und "tabindex =" 1 "", aber das Klicken auf einen Link im div entfernt den Fokus und kehrt die Div-Erweiterung um. Ich dachte, diese Problemumgehung funktioniert. Aber nein. Hier

ist ein JSfiddle von dem, was ich geschaffen habe (Dies ist eine Archiv-Seite auf einem Webcomics Seite.) Ich habe links alle Styling, damit Sie verstehen, kann genau das, was ich die Absicht:

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>

Vielen Dank!

Answer 1

Ich denke, dass dies tun sollte, was Sie vorhatten. Für jede .comicselector gibt es eine <label>, die einen versteckten Radiobutton steuert. Wenn das Optionsfeld :checked ist, hat das entsprechende .comicselector das gewünschte Verhalten für die :focus. Da alle Optionsfelder über das Namensattribut zur selben Gruppe gehören, wird durch das Aktivieren des Kontrollkästchens das aktuell ausgewählte ausgewählt.

Wenn ein Radio aktiviert ist, verdecken wir das entsprechende Etikett(), um zu verhindern, dass das .comicselector durch Klicken geschlossen wird.

Ich habe auch eine Hintergrundbeschriftung hinzugefügt, um das ausgewählte .comicselector von außen zu schließen.

das Snippet im Vollseitenmodus

.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>