The :hover behaviour in this example is making me doubt my sanity as everything in the code seems ok and works as expected, except the hovering of the white cells in the large matrix.
The generic structure has 2 flexbox div rows where:
- row one has 2 small flexbox
div3by3 matrixes (2 puzzles each with 9 cells) - row two has 1 large flexbox
div3by3 matrix of nine flexboxul3by3 matrixes (9 puzzles each with 9 cells ) - all tags (
div,ulandli) are flexbox containers - even/odd cells have different colors (white and grey)
The layouts have been copied from real Sudoku puzzles for this question (sorry, i don't have the solutions).
To reproduce the problem
- Hover the small puzzles and the grey puzzles of the large matrix. On hover, each cell gets colored
CornflowerBlue. - Hover the white cells of the large matrix and only the full puzzle gets colored
CornflowerBlueinstead of each of the 9 cells individually.
The Question
Please tell me, have I stumbled over some CSS bug (probably not) or is the solution (which?) staring me in the face and do I just not see my mistake?
The Code (A bit long, but fully commented and with a few nifty responsiveness tricks...)
/*****************************/
/* MINIMAL REQUIRED [STABLE] */
/*****************************/
/* [MANDATORY] for '.fbl-cell' to work */
html,body { box-sizing: border-box }
::before,:after, * { box-sizing: inherit }
/* remove default markup */
ul { margin: 0; padding: 0 }
li { list-style-type: none }
/**************************************/
/* easy RESPONSIVE|FONT|NESS [STABLE] */
/**************************************/
/* Math: y=mx+b for points p1(320,14) p2(1280,20) => 14>20 */
html { font-size: calc(0.00625 * 100vmin + 12px) } /* device dependend (not W/H), so use VMIN */
[lang="ar"] { font-size: calc(0.00625 * 100vmin + 15px) } /* 17>23 (Arabic looks a bit small at 14>20) */
body { font-size: 1rem; line-height: 1.5; margin: 0 } /* HTML default 16px/1.3/10px (or so) */
/***************************************/
/* GRID RESTRAINTS and MARKUP [STABLE] */
/***************************************/
/* main container */
.sudoku-row {
display: flex;
flex-flow: row wrap;
justify-content: center;
padding: .5rem;
max-width: 100vmin;
margin: 3rem auto;
}
/* cell container (default size) */
.sudoku-row>.sudoku {
height: 10rem;
width : 10rem;
margin: .5rem;
font-size: calc(0.00625 * 100vmin + 18px); /* responsive: (320,20)(1280,26) */
}
.sudoku.fullsize { /* large size override */
height: 75vmin;
width : 75vmin;
margin: 0 auto;
font-size: calc(0.025 * 100vmin + 6px); /* responsive: (320,14)(1280,38) */
}
/* hover */
.sudoku,.sudoku.fullsize>* {
border: 1px solid black;
}
[fbl-cell]>:hover,.sudoku li:hover {
background: CornflowerBlue;
cursor: pointer;
}
/* coloring/styling */
body {
background-color: #f0f0f0;
}
.sudoku-row>.sudoku {
background: #fff;
}
.sudoku>:nth-child(even) {
background-color: #eee;
}
.sudoku li {
border: 1px solid hsla(0,0%,0%,.15);
}
/*********************************************/
/* FLEXBOX and PATCH GRID STRUCTURE [STABLE] */
/*********************************************/
/* Both parent end child are flexbox containers */
[fbl-cell],[fbl-cell]>* {
display: flex;
flex-wrap: wrap;
}
[fbl-cell] {
align-content: flex-start;
}
[fbl-cell]>* { /* cell immediate child elements */
flex: 1; /* allow grow (and shrink, which is HTML default as is 'flex-basis: auto') */
overflow: hidden; /* [MANDATORY] */
/* [DEMO] center content hor/vert inside cell */
justify-content: center; align-items: center;
}
[fbl-cell="3x3"]>* { /* 3by3 matrix equally divided over parent space */
flex-basis: 33.33333%; max-width : 33.33333%; /* 'width' won't work */
height : 33.33333%; max-height: 33.33333%;
} <div class="sudoku-row">
<ul fbl-cell="3x3" class="sudoku"><li> <li>9<li> <li>4<li><li>1<li> <li> <li>3</ul>
<ul fbl-cell="3x3" class="sudoku"><li>2<li> <li>5<li> <li><li> <li> <li> <li> </ul>
</div>
<div class="sudoku-row">
<div fbl-cell="3x3" class="sudoku fullsize">
<ul fbl-cell="3x3"><li> <li>9<li> <li>4<li><li>1<li> <li> <li>3</ul>
<ul fbl-cell="3x3"><li>2<li> <li>5<li> <li><li> <li> <li> <li> </ul>
<ul fbl-cell="3x3"><li> <li>1<li> <li>3<li><li>9<li>6<li> <li> </ul>
<ul fbl-cell="3x3"><li> <li> <li>3<li> <li><li> <li>9<li> <li> </ul>
<ul fbl-cell="3x3"><li>4<li> <li>8<li> <li><li> <li>6<li> <li>1</ul>
<ul fbl-cell="3x3"><li> <li> <li>5<li> <li><li> <li> <li> <li>7</ul>
<ul fbl-cell="3x3"><li> <li> <li>9<li>6<li><li>7<li> <li>3<li> </ul>
<ul fbl-cell="3x3"><li> <li> <li> <li> <li><li> <li>7<li> <li>9</ul>
<ul fbl-cell="3x3"><li>1<li> <li> <li>4<li><li>2<li> <li>8<li> </ul>
</div>
</div>
