0
：ホバーこの例での動作は、コード内のすべてが正常であり、期待通りに動作するため、私の正気を疑います。ホバリング大きいマトリックス中のの白セル。フレックスボックスセル（ネスト）上にホバーを入れたCSSフレックスボックスグリッドは動作しません。
一般構造は2フレキシボックスdiv行があります一つは行2が1つの大きいフレキシボックスdiv 3by3を有する2小さなフレキシボックスにdiv 3by3行列（2つのパズル9個の細胞とそれぞれ）
- 行9つのフレックスボックスのマトリクス
ul3by3のマトリクス（それぞれ9つのセルを有する9つのパズル） - すべてのタグ（
div,ulおよびli）はフレックスボックスc偶数/奇数セルは異なる色（白とグレー）
を持ってontainers
- 問題を再現する
は小さなパズルおよび大きな行列のグレーパズルを合わせます。ホバーで、各セルは、大きなマトリックスとのみフルパズルの白血球ではなく9個の細胞個別の各々の
CornflowerBlueを着色しますCornflowerBlue. - ホバーを着色します。
質問
を教え、私はいくつかのCSSのバグ（おそらくない）つまずいまたは溶液である（これは？）顔で私を見つめ、私はちょうど私のミスが表示されないていてください。 ？
コード （少し長いが、完全にコメント、いくつかの気の利いた応答トリックと...）
/*****************************/
/* 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>
アーク、私はそれが明らかでなければならないことを知っています。そして今、 '.sudoku>：nth-child（奇妙な）{background-color：#fff} 'を追加して新鮮な表情を見せてもうまくいきましたが、'見落とし/エラー 'をさらに難読化しました。ありがとう！ –
実際には、ホバールールを '[fbl-cell]>に変更する：hover {cursor：pointer;背景：hsla（219,79％、66％,.5）。/* CornflowerBlue * /} '私は親（白）と子（透明）の両方をホバリングしていて、ホバーカラーのためにそれを見なかったことが分かりました。 –