html - servono - hashtag linkedin non funzionano




C'è un modo per attivare due modifiche facendo clic su una sola etichetta? (4)

Ho giocato con HTML e CSS per creare un semplice gioco da tavolo a 2 giocatori senza usare JavaScript. Uso etichette, pulsanti di opzione e caselle di controllo per creare diversi stati e simulare una logica in modo che il pezzo si muova attorno al tabellone.

Funziona "bene", anche se l'usabilità non è eccezionale. Ad esempio, dopo aver cliccato sul dado, la tessera si muove, e visualizzo un pulsante per passare al giocatore successivo (controllato di nuovo con un'etichetta e una casella di controllo) ... il che non è eccezionale, sarebbe meglio se cambiasse giocatore "automaticamente."

Il problema è che <label> può targetizzare solo un elemento, e non so come attivare due "azioni" (o effetti collaterali) con un solo clic.

Il codice seguente è un mcve per visualizzare meglio il problema: ci sono due giocatori (specificati per turno), una tavola con tre tessere (rappresentata da 6 pulsanti radio: 1 per giocatore e tessera), e due pulsanti per cambiare turno giocatore (solo uno visibile). Se fai clic sul pulsante di cambio turno, il turno passerà al giocatore successivo. (Un esempio più complesso può essere trovato here )

Il problema è che gli utenti sono costretti a premere il pulsante per cambiare turno, altrimenti lo stesso giocatore sarà sempre attivo. C'è un modo per fare in modo che quando un'etichetta viene cliccata, non solo la tessera venga attivata, ma anche il turno viene cambiato? O in sua assenza, esiste un'alternativa per raggiungere questo obiettivo? (senza usare JS)

#p1:checked ~ [for=p1],
#p1:checked ~ [for^=tile-p2],
#p1:checked ~ [name^=tile-p2],
#p2:checked ~ [for=p2],
#p2:checked ~ [for^=tile-p1],
#p2:checked ~ [name^=tile-p1]
{ 
  display: none; 
}

/* more rules to hide/show more elements */
<h1>Players:</h1>
<input type="radio" id="p1" name="player" checked /> P1
<input type="radio" id="p2" name="player" /> P2

<h1>Board: </h1>
Player 1:
<input type="radio" id="tile-p1-1" name="tile-p1" checked />
<label for="tile-p1-1">P1 to 1</label>
<input type="radio" id="tile-p1-2" name="tile-p1" />
<label for="tile-p1-2">P1 to 2</label>
<input type="radio" id="tile-p1-3" name="tile-p1" />
<label for="tile-p1-3">P1 to 3</label>
<br/>
Player 2:
<input type="radio" id="tile-p2-1" name="tile-p2" checked />
<label for="tile-p2-1">P2 to 1</label>
<input type="radio" id="tile-p2-2" name="tile-p2" />
<label for="tile-p2-2">P2 to 2</label>
<input type="radio" id="tile-p2-3" name="tile-p2" />
<label for="tile-p2-3">P2 to 3</label>

<h1>Change of turn:</h1>
<label for="p2">Change to Player 2</label>
<label for="p1">Change to Player 1</label>

C'è un modo per attivare due "cambiamenti di stato" facendo clic su un solo <label> o <a> ?

Alcuni tentativi per risolvere questo:

Ho provato a mettere un <a> all'interno di <label> per poter attivare due modifiche leggibili :target e :checked (con: target controllerei il turno del giocatore, e con: checked sarebbe la posizione del pezzo) . Sembra essere un codice HTML valido (almeno secondo il validatore W3C), ma in realtà non funziona . Ad esempio, nel frammento successivo, facendo clic sul primo collegamento si evidenzierà il testo, facendo clic sul secondo si contrassegnerà la casella, e (sperai) facendo clic sul terzo si farebbe entrambi ... ma non lo fa:

#test:target {
  color: red;
}

#cb:checked

a, label {
  display: block;
  text-decoration: underline;
  color: blue;
}
<input type="checkbox" id="cb" />
<div id="test">TEST</div>

<a href="#test">Highlight test</a>
<label for="cb">Check the box</label>
<label for="cb">
  <a href="#test">Highlight test AND check the box</a>
</label>

Ho anche provato a giocare con diverse pseudo-classi :checked e :invalid . Non ha funzionato molto per una casella di controllo, poiché entrambi si sarebbero applicati contemporaneamente, e dai miei test, required non si applica a una singola radio (ma potrei fare qualcosa di sbagliato):

div {
  color: purple;
}

#radio1:checked ~ div {
  color: blue;
}

#radio2:checked ~ div {
  color: fuchsia;
}

#radio1:invalid ~ div {
  color: red;
}

#radio1:invalid + #radio2:checked ~ div {
  color: green;
}
<input type="radio" name="radio1" id="radio1" required />
<input type="radio" name="radio1" id="radio2" />

<div>Text to be green if radio2 is checked</div>


E 'questo quello che stai cercando?

.boxes {
  height: 80px;
  width: 80px;
  background-color: white;
  border: 1px solid black;
  position: relative;
}

.boxes span {
  position: absolute;
  width: 100%;
  height: 100%;
}

.boxes a div {
  display: none;
}

.boxes a:target div {
  display: block;
  height: 80px;
  width: 80px;
  background-color: black;
  border: 1px solid black;
  position: absolute;
  margin-left: 150px;
}

.boxes a:target span {
  background-color: black;
}

a {
  color: white;
}
<div class="boxes">
  <a href="#firstgroup" id="firstgroup">
    <span>Box A</span>
    <div>Box B</div>
  </a>
</div>

<div class="boxes">
  <a href="#secondgroup" id="secondgroup">
    <span>Box C</span>
    <div>Box D</div>
  </a>
</div>

Questo utilizza :target per cambiare gli attributi di più elementi con un solo trigger.


Onestamente, non penso che ci sia un metodo che può commutare più stati di checkbox usando solo HTML e CSS.

Ciò non vuol dire che non sia possibile renderlo più intuitivo con i CSS disegnando gli elementi in un modo che faccia in modo che il passaggio tra i giocatori sia come una parte del processo.

Ho creato uno snippet di esempio veloce e sporco che fornisce un metodo di implementazione (usando l'opacità di base e gli stili di cursore). Tuttavia, questo metodo può essere utilizzato in tutta una serie di approcci diversi.

Ad esempio, è possibile spostare del tutto il dado fuori dallo schermo o alternare un div in modo da impedire che gli elementi vengano visti / cliccati (utilizzando il posizionamento assoluto e lo z-index).

In effetti, l'approccio z-index potrebbe essere utilizzato per consentire al giocatore di cambiare senza dover spostare il cursore, rendendolo quindi più intuitivo dal punto di vista del giocatore.

Speriamo che queste idee possano aiutare a ottenere la palla - o morire, rotolando. 😁

/* Simple Checkbox Hack */

input[type=checkbox] {
  position: absolute;
  left: -9999px;
  }

.die { 
  position: absolute;
  height: 5em;
  width: 5em;
  background: lightgray;
  border: 1pt solid gray;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  line-height: 5em;
  margin: .5em;
  cursor: pointer;
  }



/* Default State */

.p1, .p2 {
  width: 30em;
  height: 2em;
  line-height: 2em;
  color: white;
  text-align: center;
  opacity: 0.3;
  cursor: not-allowed;
  }

.p1 {
  background: green;
  }

.p2 {
  background: blue;
  }



/* Toggled State */

input[type=checkbox]:checked ~ .p1 {
   opacity: 1;
   cursor: pointer;
}
input[type=checkbox]:checked ~ .die {
   opacity: 0.3;
   cursor: not-allowed;
}
<small style="color: gray;"> (For this example, die can be clicked more than once.) </small>
<br>
<input type="checkbox" id="toggle-1">
<label class="die" for="toggle-1">Roll me!</label>
<br> <br> <br> <br> <br> <br>
<div class="p1">Player 1 - Click to start.</div>
<div class="p2">Player 2 - Click to start.</div>


Un'idea è considerare lo stato :focus sull'etichetta che ti consentirà di attivare due modifiche. L'unico inconveniente è che :focus stato di :focus sarà abilitato solo sul mousedown e disabilitato sul mouseup .

Ecco un esempio

label:focus + #test {
 color: red;
}

label {
  display: block;
  text-decoration: underline;
  color: blue;
}
<input type="checkbox" id="cb" >

<label for="cb"  tabindex=-1>Check the box and highlight the text</label>
<div id="test">TEST</div>

AGGIORNARE

Usando la logica di cui sopra e considerando il codice iniziale del gioco dei dadi ecco un'idea usando l'animazione. Il trucco è creare un'animazione in pausa con 2 stati e su :focus I esegue l'animazione per passare da uno stato all'altro.

Naturalmente, questo non è preciso al 100% in quanto dipenderà dalla velocità del clic, ma può essere un'idea da considerare:

.container {
  position: relative;
}

label {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #eeeeee;
  text-align: center;
  animation: changeOrder 0.6s infinite;
}

@keyframes changeOrder {
  from { z-index: 6;}
   to { z-index: 1; }
}
label:nth-of-type(1) { animation-delay: 0s; }
label:nth-of-type(2) { animation-delay: -0.1s; }
label:nth-of-type(3) { animation-delay: -0.2s; }
label:nth-of-type(4) { animation-delay: -0.3s; }
label:nth-of-type(5) { animation-delay: -0.4s; }
label:nth-of-type(6) { animation-delay: -0.5s; }


label:active {
  /*Mandatory to break the stacking context and allow 
       the pseudo element to be above everything*/
  position: static;
  /*For illustration*/
  margin-left: 50px;
  background: red;
}

label:active::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 10;
}
.player {
  display:inline-block;
  margin-top:80px;
}

.player:before {
 content:"Player One";
 animation: player .3s infinite step-end;
 animation-play-state: paused;
}

label:focus ~ .player:before{
 animation-play-state: running;
}

@keyframes player {
  0% {
     content:"Player One";
  }
  50% {
     content:"Player Two";
  }

}
<input type="radio" name="cb" id="cb1" value="1">
<input type="radio" name="cb" id="cb2" value="2">
<input type="radio" name="cb" id="cb3" value="3">
<input type="radio" name="cb" id="cb4" value="4">
<input type="radio" name="cb" id="cb5" value="5">
<input type="radio" name="cb" id="cb6" value="6">
<div class="container">
  <label for="cb1" tabindex="-1">1</label>
  <label for="cb2" tabindex="-1">2</label>
  <label for="cb3" tabindex="-1">3</label>
  <label for="cb4" tabindex="-1">4</label>
  <label for="cb5" tabindex="-1">5</label>
  <label for="cb6" tabindex="-1">6</label>
  <span class="player" ></span>
</div>

Nel caso in cui si desideri un effetto permanente statico, è piuttosto semplice in quanto è sufficiente rendere la durata molto piccola e utilizzare i forwards .

.container {
  position: relative;
}

label {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #eeeeee;
  text-align: center;
  animation: changeOrder 0.6s infinite;
}

@keyframes changeOrder {
  from { z-index: 6;}
   to { z-index: 1; }
}
label:nth-of-type(1) { animation-delay: 0s; }
label:nth-of-type(2) { animation-delay: -0.1s; }
label:nth-of-type(3) { animation-delay: -0.2s; }
label:nth-of-type(4) { animation-delay: -0.3s; }
label:nth-of-type(5) { animation-delay: -0.4s; }
label:nth-of-type(6) { animation-delay: -0.5s; }


label:active {
  /*Mandatory to break the stacking context and allow 
       the pseudo element to be above everything*/
  position: static;
  /*For illustration*/
  margin-left: 50px;
  background: red;
}

label:active::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 10;
}
.player {
  display:inline-block;
  margin-top:80px;
}

.player:before {
 content:"Click the dice!";
 animation: player .1s forwards;
 animation-play-state: paused;
}

label:focus ~ .player:before{
 animation-play-state: running;
}

@keyframes player {
  2%,100% {
     content:"Dice clicked!";
  }

}
<input type="radio" name="cb" id="cb1" value="1">
<input type="radio" name="cb" id="cb2" value="2">
<input type="radio" name="cb" id="cb3" value="3">
<input type="radio" name="cb" id="cb4" value="4">
<input type="radio" name="cb" id="cb5" value="5">
<input type="radio" name="cb" id="cb6" value="6">
<div class="container">
  <label for="cb1" tabindex="-1">1</label>
  <label for="cb2" tabindex="-1">2</label>
  <label for="cb3" tabindex="-1">3</label>
  <label for="cb4" tabindex="-1">4</label>
  <label for="cb5" tabindex="-1">5</label>
  <label for="cb6" tabindex="-1">6</label>
  <span class="player" ></span>
</div>

AGGIORNAMENTO 2

Ecco un'altra idea che si basa sulla transizione ed è più accurata MA ho bisogno di fare affidamento su due dadi poiché ognuno innescherà uno stato specifico al fine di cambiare il testo, quindi dobbiamo trovare un modo su come fare entrambi i dadi uno sopra l'altro e cambia il loro ordine al clic:

.container {
  position:relative;
  margin-top:20px;
  overflow:hidden;
  min-height:50px;
}

label {
  display:block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #eeeeee;
  text-align: center;
  animation: changeOrder 0.6s infinite;
}
label:active {
  /*Mandatory to break the stacking context and allow 
       the pseudo element to be above everything*/
  position: static;
  width:0;
  height:0;
  overflow:hidden;
}

label:active::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 10;
}

@keyframes changeOrder {
  from { z-index: 6;}
   to { z-index: 1; }
}
label:nth-of-type(1),label:nth-of-type(7) { animation-delay: 0s; }
label:nth-of-type(2),label:nth-of-type(8) { animation-delay: -0.1s; }
label:nth-of-type(3),label:nth-of-type(9) { animation-delay: -0.2s; }
label:nth-of-type(4),label:nth-of-type(10) { animation-delay: -0.3s; }
label:nth-of-type(5),label:nth-of-type(11) { animation-delay: -0.4s; }
label:nth-of-type(6),label:nth-of-type(12) { animation-delay: -0.5s; }



label.second {
  left:100px;
}

.player {
  display:inline-block;
  margin-top:80px;
  height: 18px;
  overflow:hidden;
}
.player span {
  display:block;
  margin-top:-18px;
  transition:1000s;
}



label.first:focus ~ .player span{
  margin-top:0;
  transition:0s;
}
label.second:focus ~ .player span{
  margin-top:-36px;
  transition:0s;
}
<input type="radio" name="cb" id="cb1" value="1">
<input type="radio" name="cb" id="cb2" value="2">
<input type="radio" name="cb" id="cb3" value="3">
<input type="radio" name="cb" id="cb4" value="4">
<input type="radio" name="cb" id="cb5" value="5">
<input type="radio" name="cb" id="cb6" value="6">
<div class="container">
<label class="first" for="cb1" tabindex="-1">1</label>
<label class="first" for="cb2" tabindex="-1">2</label>
<label class="first" for="cb3" tabindex="-1">3</label>
<label class="first" for="cb4" tabindex="-1">4</label>
<label class="first" for="cb5" tabindex="-1">5</label>
<label class="first" for="cb6" tabindex="-1">6</label>
  
<label class="second" for="cb1" tabindex="-1">1</label>
<label class="second" for="cb2" tabindex="-1">2</label>
<label class="second" for="cb3" tabindex="-1">3</label>
<label class="second" for="cb4" tabindex="-1">4</label>
<label class="second" for="cb5" tabindex="-1">5</label>
<label class="second" for="cb6" tabindex="-1">6</label>

<div class="player">
 <span> Player One Clicked<br>
  Which player?<br>
  Player Two clicked
 </span>
</div>
</div>

Come nota a margine, ho usato :focus e :active modo che possiamo fare affidamento su questi stati in quanto possono essere attivati ​​insieme anche con elementi nidificati:

div {
  display:block;
  outline: none;
  padding:10px 0;
}
.first:active + div{
  color:red
}
.second:active + div{
  color:red
}

.first:focus + div{
  border:1px solid red
}
.second:focus + div{
  border:1px solid red
}
<div class="first" tabindex=-1 >
  Click me (only last text will change)
  <div class="second" tabindex=-1 >
    Click me (both text will change)
  </div>
  <div>
    I will be updated
  </div>
</div>
<div>
  I will be updated
</div>


Risposta modificata per riflettere le modifiche alla domanda originale:

Prova a impostare diversi stati in cui ogni stato riflette sia il giocatore attivo che la posizione dei pezzi, come:

input {
  position: absolute;
  bottom: 1em;
  right: 1em;
  margin: 2px;
}

.status {
  margin: 1em;
  font-family: sans-serif;
  display: none;
}
.active1:checked ~ #status1,
.active2:checked ~ #status2,
.win1:checked ~ #status3,
.win2:checked ~ #status4 {
  display: block
}

#board {
  position: relative;
  top: 0;
  left: 0;
  border: 1px solid black;
  padding: 2px 3px;
  margin: 1em auto;
  width: 27em;
  height: 12em;
}
#board:before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 2px;
  height: 9em;
  width: 9em;
  background: silver;
  content: ' ';
}
#board:after {
  display: block;
  position: absolute;
  bottom: 0;;
  right: 0;
  margin: 2px;
  height: 9em;
  width: 9em;
  background: silver;
  content: ' ';
}

.piece {
  position: absolute;
  z-index: 2;
  width: 1em;
  height: 1em;
  padding: 1em;
  margin: 1px;
  border-radius: 666em;
  line-height: 1em;
  text-align: center;
}
#piece1 {
  background: white;
  color: black;
  border: 1px solid black;
}
#piece2 {
  background: black;
  color: white;
  border: 1px solid white;
}
.win2:checked ~ #piece1,
.win1:checked ~ #piece2 {
  display: none;
}
.active1:checked ~ #piece1,
.active2:checked ~ #piece2 {
  border: 1px solid red;
}
.p1_1:checked ~ #piece1,
.p2_1:checked ~ #piece2 {
  left: 3em;
  bottom: 3em;
}
.p1_2:checked ~ #piece1,
.p2_2:checked ~ #piece2 {
  left: 12em;
  bottom: 3em;
}
.p1_3:checked ~ #piece1,
.p2_3:checked ~ #piece2 {
  right: 3em;
  bottom: 3em;
}

label {
  display: none;
  position: absolute;
  bottom: 0;
  z-index: 3;
  width: 9em;
  height: 9em;
  margin: 2px;
  text-indent: -666666em;
  /*background: green;*/
  opacity: .25;
  cursor: pointer;
}
label.pos1 {
  left: 0;
}
label.pos2 {
  left: 9em;
  margin: 2px 3px;
}
label.pos3 {
  right: 0
}
label.restart {
   top: 0;
   left: 0;
   width: 27em;
   height: 12em;
   padding: 0 1px;
   /*background: orange;*/
}
label.win1,
label.win2 {
  /*background: blue;*/
}
.active1.p2_1:checked ~ label.active1.opp1,
.active1.p2_2:checked ~ label.active1.opp2,
.active1.p2_3:checked ~ label.active1.opp3,
.active2.p1_1:checked ~ label.active2.opp1,
.active2.p1_2:checked ~ label.active2.opp2,
.active2.p1_3:checked ~ label.active2.opp3 {
  display: block;
}
.active1.p1_1:checked ~ label.active1.pos1,
.active1.p1_2:checked ~ label.active1.pos2,
.active1.p1_3:checked ~ label.active1.pos3,
.active2.p2_1:checked ~ label.active2.pos1,
.active2.p2_2:checked ~ label.active2.pos2,
.active2.p2_3:checked ~ label.active2.pos3 {
  display: none;
}
.active1.p2_1:checked ~ label.win1.pos1,
.active1.p2_2:checked ~ label.win1.pos2,
.active1.p2_3:checked ~ label.win1.pos3,
.active2.p1_1:checked ~ label.win2.pos1,
.active2.p1_2:checked ~ label.win2.pos2,
.active2.p1_3:checked ~ label.win2.pos3 {
  display: block;
}
.win1:checked ~ label.restart,
.win2:checked ~ label.restart {
  display: block;
}
<html>
  <head>
    <meta charset="utf-8">
    <title>some game</title>
  </head>
  <body>
    <div id="board">
      <input id="s1" class="active1 p1_1 p2_2" type="radio" name="state" value="1">
      <input id="s2" class="active1 p1_1 p2_3" type="radio" name="state" value="2" checked="checked">
      <input id="s3" class="active1 p1_2 p2_1" type="radio" name="state" value="3">
      <input id="s4" class="active1 p1_2 p2_3" type="radio" name="state" value="4">
      <input id="s5" class="active1 p1_3 p2_1" type="radio" name="state" value="5">
      <input id="s6" class="active1 p1_3 p2_2" type="radio" name="state" value="6">
      <input id="s7" class="active2 p1_1 p2_2" type="radio" name="state" value="7">
      <input id="s8" class="active2 p1_1 p2_3" type="radio" name="state" value="8">
      <input id="s9" class="active2 p1_2 p2_1" type="radio" name="state" value="9">
      <input id="s10" class="active2 p1_2 p2_3" type="radio" name="state" value="10">
      <input id="s11" class="active2 p1_3 p2_1" type="radio" name="state" value="11">
      <input id="s12" class="active2 p1_3 p2_2" type="radio" name="state" value="12">
      <input id="s13" class="win1 p1_1" type="radio" name="state" value="13">
      <input id="s14" class="win1 p1_2" type="radio" name="state" value="14">
      <input id="s15" class="win1 p1_3" type="radio" name="state" value="15">
      <input id="s16" class="win2 p2_1" type="radio" name="state" value="16">
      <input id="s17" class="win2 p2_2" type="radio" name="state" value="17">
      <input id="s18" class="win2 p2_3" type="radio" name="state" value="18">
      <div id="status1" class="status">Player 1:</div>
      <div id="status2" class="status">Player 2:</div>
      <div id="status3" class="status">Player 1 won!</div>
      <div id="status4" class="status">Player 2 won!</div>
      <div id="piece1" class="piece">p1</div>
      <div id="piece2" class="piece">p2</div>
      <label for="s1" class="active2 pos2 opp1">Player 2: move piece to position 2</label>
      <label for="s2" class="active2 pos3 opp1">Player 2: move piece to position 3</label>
      <label for="s3" class="active2 pos1 opp2">Player 2: move piece to position 1</label>
      <label for="s4" class="active2 pos3 opp2">Player 2: move piece to position 3</label>
      <label for="s5" class="active2 pos1 opp3">Player 2: move piece to position 1</label>
      <label for="s6" class="active2 pos2 opp3">Player 2: move piece to position 2</label>
      <label for="s7" class="active1 pos1 opp2">Player 1: move piece to position 1</label>
      <label for="s8" class="active1 pos1 opp3">Player 1: move piece to position 1</label>
      <label for="s9" class="active1 pos2 opp1">Player 1: move piece to position 2</label>
      <label for="s10" class="active1 pos2 opp3">Player 1: move piece to position 2</label>
      <label for="s11" class="active1 pos3 opp1">Player 1: move piece to position 3</label>
      <label for="s12" class="active1 pos3 opp2">Player 1: move piece to position 3</label>
      <label for="s13" class="win1 pos1">Player 1: move piece to position 1</label>
      <label for="s14" class="win1 pos2">Player 1: move piece to position 2</label>
      <label for="s15" class="win1 pos3">Player 1: move piece to position 3</label>
      <label for="s16" class="win2 pos1">Player 2: move piece to position 1</label>
      <label for="s17" class="win2 pos2">Player 2: move piece to position 2</label>
      <label for="s18" class="win2 pos3">Player 2: move piece to position 3</label>
      <label for="s2" class="restart">Restart game</label>
    </div>
  </body>
</html>

Questo è solo un esempio molto semplice, in cui ogni giocatore può muovere il suo pezzo in qualsiasi campo che desidera e se il pezzo del suo avversario "accade" in quel campo vince.

In uno scenario reale potresti prendere in considerazione l'uso di alcuni preprocessori HTML e CSS, come Pug / Jade e Sass per scorrere tutte le possibili combinazioni di stato.

Aggiornare

Non riuscivo a togliermelo dalla testa, così ho giocato un po '...

:focus sembrava essere un buon punto di partenza, quindi ho provato (suggerimento: assicurati di impostare tabindex="0" su <label> s). Ma c'è sempre un po 'di ordine nelle cose e non sono riuscito a trovare un modo per ottenere relazioni bidirezionali usando ~ .

Così sono tornato al mio commento di ieri, sul rendere la UX del pulsante 'next player' più 'fluente'. Here mio codice (l'idea di base è di cambiare il pulsante 'next player' in uno stato 'confirm move', in cui il giocatore può confermare la propria mossa o scegliere un'altra tessera in cui spostarsi). No, non è una risposta alla tua domanda , ma sembra una soluzione al tuo problema (e scala "bene" più o meno, almeno lineare, non cubica). html / css sembra un po 'ingombrante da postare qui e Jade / Sass non riesco a mettermi al lavoro, quindi ecco i link a quei file:





css-selectors