如何使用 CSS 網格布局在行表上設置懸停狀態

Question

這是一個使用 CSS 網格布局創建的表格，但我遇到了問題，我無法在每一行上設置懸停狀態。

我只想為此使用 CSS。

誰能給我一個解決方案？

 .table { display: grid; grid-template-columns: [col-start] auto [col-end]; grid-template-rows: [header-start] 50px [header-end row-start] auto [row-end]; grid-auto-rows: auto; grid-auto-columns: auto; grid-gap: 1px; } .table>* { background: gray; padding: 10px; } .heading { background: navy; color: #fff; grid-row: header; }

 <div class="table"> <div class="heading">Title 1</div> <div class="heading">Title 2</div> <div class="heading">Title 3</div> <div class="heading">Title 4</div> <div class="heading">Title 5</div> <div class="row">Row 1</div> <div class="row">Row 1</div> <div class="row">Row 1</div> <div class="row">Row 1</div> <div class="row">Row 1</div> <div class="row">Row 2</div> <div class="row">Row 2</div> <div class="row">Row 2</div> <div class="row">Row 2</div> <div class="row">Row 2</div> <div class="row">Row 3</div> <div class="row">Row 3</div> <div class="row">Row 3</div> <div class="row">Row 3</div> <div class="row">Row 3</div> </div>

Answer 1

由於您將此視為表格，其中元素位於同一行中，因此您還可以將每一行包裝在 DIV 中，並將“display”設置為“contents”。 這形成了一個用於懸停的無害父元素，然后設置子元素的樣式。 （盡管顯示：Edge 尚不支持內容。）

 .table { display: grid; grid-template-columns: [col-start] auto [col-end]; grid-template-rows: [header-start] 50px [header-end row-start] auto [row-end]; grid-auto-rows: auto; grid-auto-columns: auto; grid-gap: 1px; overflow: hidden; background: gray; } .table .row, .table .heading{ padding: 10px; position: relative; } .heading { background: navy; color: #fff; grid-row: header; } .row span { position: relative; z-index: 2; } .rowWrapper{ display: contents; } .rowWrapper:hover > div{ background-color: orange; }

 <div class="table"> <div class="heading">Title 1</div> <div class="heading">Title 2</div> <div class="heading">Title 3</div> <div class="heading">Title 4</div> <div class="heading">Title 5</div> <div class="rowWrapper"> <div class="row"><span>Row 1</span></div> <div class="row"><span>Row 1</span></div> <div class="row"><span>Row 1</span></div> <div class="row"><span>Row 1</span></div> <div class="row"><span>Row 1</span></div> </div> <div class="rowWrapper"> <div class="row"><span>Row 2</span></div> <div class="row"><span>Row 2</span></div> <div class="row"><span>Row 2</span></div> <div class="row"><span>Row 2</span></div> <div class="row"><span>Row 2</span></div> </div> <div class="rowWrapper"> <div class="row"><span>Row 3</span></div> <div class="row"><span>Row 3</span></div> <div class="row"><span>Row 3</span></div> <div class="row"><span>Row 3</span></div> <div class="row"><span>Row 3</span></div> </div> </div>

Answer 2

這是使用偽元素的技巧。 這個想法是使用元素作為背景並使其在左右溢出，以便它覆蓋所有行。 就像這樣，如果您將鼠標懸停在一行內的任何元素上，您就會更改顏色，就像您更改了整行的顏色一樣。

這個技巧涉及對標記的一些更改以及更多的 CSS。

 .table { display: grid; grid-template-columns: [col-start] auto [col-end]; grid-template-rows: [header-start] 50px [header-end row-start] auto [row-end]; grid-auto-rows: auto; grid-auto-columns: auto; grid-gap: 1px; overflow: hidden; background: gray; } .table>* { padding: 10px; position: relative; } .heading { background: navy; color: #fff; grid-row: header; } .row span { position: relative; z-index: 2; } .row:before { content: ""; position: absolute; top: 0; bottom: 0; right: -1000%; left: -1000%; z-index: 1; } .row:after { content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 1px; z-index: 2; background-color: #fff; } .row:nth-child(5n+5)::after { bottom: -1px; right: 0; left: -1000%; height: 1px; z-index: 3; width: auto; top: auto; background-color: #fff; } .row:hover::before { background-color: red; }

 <div class="table"> <div class="heading">Title 1</div> <div class="heading">Title 2</div> <div class="heading">Title 3</div> <div class="heading">Title 4</div> <div class="heading">Title 5</div> <div class="row"><span>Row 1</span></div> <div class="row"><span>Row 1</span></div> <div class="row"><span>Row 1</span></div> <div class="row"><span>Row 1</span></div> <div class="row"><span>Row 1</span></div> <div class="row"><span>Row 2</span></div> <div class="row"><span>Row 2</span></div> <div class="row"><span>Row 2</span></div> <div class="row"><span>Row 2</span></div> <div class="row"><span>Row 2</span></div> <div class="row"><span>Row 3</span></div> <div class="row"><span>Row 3</span></div> <div class="row"><span>Row 3</span></div> <div class="row"><span>Row 3</span></div> <div class="row"><span>Row 3</span></div> </div>

Answer 3

這是我的解決方案，基於兄弟組合。
主要部分是：

.datacell:hover ~ .datarow {
    background-color: rgba(255,255,0,0.5);
}
.datacell:hover ~ .datarow + .datacell ~ .datarow{
    background-color: transparent;
}

片段：

 .datatable{ display:grid; grid-gap: 0; grid-template-columns: auto 1fr auto; position: relative; } .datarow{ grid-column: 1 / 4; z-index: 0; } .datacell{ z-index: 1; padding: 8px; border-bottom: 1px solid #c0c0c0; } .datacell:hover ~ .datarow { background-color: rgba(255,255,0,0.5); } .datacell:hover ~ .datarow + .datacell ~ .datarow{ background-color: transparent; } .row-1{ grid-row: 1;} .row-2{ grid-row: 2;} .row-3{ grid-row: 3;} .col-1{ grid-column: 1;} .col-2{ grid-column: 2;} .col-3{ grid-column: 3;}

 <div class="datatable"> <div class="datacell col-1 row-1">Row 1 Column 1</div> <div class="datacell col-2 row-1">Row 1 Column 2</div> <div class="datacell col-3 row-1">Row 1 Column 3</div> <div class="datarow row-1"></div> <div class="datacell col-1 row-2">Row 2 Column 1</div> <div class="datacell col-2 row-2">Row 2 Column 2</div> <div class="datacell col-3 row-2">Row 2 Column 3</div> <div class="datarow row-2"></div> <div class="datacell col-1 row-3">Row 3 Column 1</div> <div class="datacell col-2 row-3">Row 3 Column 2</div> <div class="datacell col-3 row-3">Row 3 Column 3</div> <div class="datarow row-3"></div> </div>

html 的結構必須使.datarow元素關閉虛擬網格行並跨越所有前面的單元格。 為了讓單元格和行重疊，需要在網格內明確定位。

Answer 4

我最終得到了一個不同的解決方案。 我的桌子看起來像這樣：

 .table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

 <div class="table"> <span>head1</span> <span>head2</span> <span>head3</span> <span>row1 col1</span> <span>row1 col2</span> <span>row1 col3</span> <span>row2 col1</span> <span>row2 col2</span> <span>row2 col3</span> </div>

現在你想要每行的懸停狀態。 添加一個包裹每一行的元素會破壞父網格，因為它實際上是您試圖在網格中布置的那些行包裝器的子元素。 此外，我更喜歡：

• 不使用<table> 。 這使所需的行數增加了一倍，並且需要更多的樣式。
• 不使用nth-child令人費解。
• 我沒有嘗試過的一個不錯的選擇似乎是將每一行包裝在div ，添加一個類.row並display: contents ，然后使用.row:hover > span作為選擇器，您可以添加opacity: 0.6 。 看起來不錯！ 其他一些答案也朝着這個方向發展。

我最終選擇了以下我覺得更簡單的方法：

 .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .row:hover { opacity: 0.6 }

 <div class="row"> <span>head1</span> <span>head2</span> <span>head3</span> </div> <div class="row"> <span>row1 col1</span> <span>row1 col2</span> <span>row1 col3</span> </div> <div class="row"> <span>row2 col1</span> <span>row2 col2</span> <span>row2 col3</span> </div>

Answer 5

I have solution for your problem. The example below:

 .grid .row { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid gray; } .grid .row div { padding: 10px; display: flex; align-items: center; } .grid .row:last-child { border: none; } .grid .row:hover { background-color: #cccccc; transition: .2s all; }

 <div class='grid'> <div class='row'> <div>Header</div> <div>Header</div> <div>Header</div> <div>Header</div> </div> <div class='row'> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> </div> <div class='row'> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> </div> <div class='row'> <div>Content</div> <div>Content</div> <div>Content</div> <div>Content</div> </div> </div>

Answer 6

我有這個問題。 首先，我很想知道為什么如果您使用顯示網格，為什么不使用 grid-item 類？ 沒有必要嗎？ 我認為是。 無論如何，答案是，您需要為所有 div 元素提供 grid-item 類並將位置設置為相對。

.grid-item {
  position: relative;
}