CSS Grid如何選擇行來添加懸停效果？

Question

我需要選擇一行來為其添加hover效果。 我試圖用div包裝所有單元格，但所有標記都被銷毀。 有誰知道怎么做？ 這甚至可能嗎？

點擊此處查看完整代碼： https ： //codesandbox.io/s/goofy-easley-w5rrg

const TableWrapperUI = styled.div `
  display: grid;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #dbeaf4;
  grid-template-columns: repeat(
    ${props => props.columns && props.columns},
    fit-content(400px)
  );
  justify-items: center;
  padding: 5px 0;
  justify-content: space-between;
  > span {
    padding: 5px;
    justify-self: left;
    :hover {
      background: #dbeaf4;
    }
  }`;

const LineUI = styled.div `
  border-bottom: 1px solid #dbeaf4;
  width: 100%;
  grid-column: 1 / -1;
`;

Answer 1

您不能從子網格中選擇整行，但如果是關於突出顯示背景，則可以偽造它。

const TableWrapperUI = styled.div`
  display: grid;
  box-sizing: border-box;
  width: 80%;/* demo, to show overflow cut off */
  overflow:hidden;
  border: 1px solid #dbeaf4;
  grid-template-columns: repeat(
    ${props => props.columns && props.columns},
    fit-content(400px)
  );
  justify-items: center;
  padding: 5px 0;
  justify-content: space-between;
  > span {
    padding: 5px;
    justify-self: left;
    position: relative;  
    :hover {
      background: #dbeaf4;
    }
    :hover::before, ::before {
      content: "";
      position: absolute;
      background: inherit;
      top: 0;
      bottom: 0;
      left: -100vw;
      right: -100vw;
    }
    :hover::before {
      z-index:-1
    }
  }
`;

https://codesandbox.io/s/affectionate-colden-m34od

Answer 2

display: contents; 救援！

均田。

根據您的瀏覽器支持和/或輔助功能要求 ，我們可以使用相對較新的display: contents屬性 ，使用您擁有的常規結構來實現所需的效果。

描述display: contents有點困難，所以我將指出這篇優秀的CSS Tricks文章 。

要使用它，我們會將每組<span>元素連續包裝到帶有display: contents的<div> 。 這允許我們以div:hover > span元素為目標並應用背景顏色。

您的樣式還需要進行一些其他小的更改，例如使<span>元素填充可用寬度。 這是一個有效的例子：

 .parent { display: grid; box-sizing: border-box; width: 100%; border: 1px solid #dbeaf4; grid-template-columns: repeat(4, minmax(15%, max-content)); padding: 5px 0; } .parent span { padding: 5px; border-bottom: 1px solid #dbeaf4; } .row { display: contents; } .row:hover span { background-color: #dbeaf4; cursor: pointer; } 

 <div class="parent"> <div class="row"> <span>1</span> <span>2</span> <span>3</span> <span>Knowledge process outsourcing land the plane yet to be inspired is to become creative, innovative and energized we want this</span> </div> <div class="row"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> <div class="row"> <span>We need to socialize the comms with the wider stakeholder community</span> <span>2</span> <span>3</span> <span>4</span> </div> <div class="row"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> <div class="row"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> </div> 

使用React和Styled Components

現在我們已經有了CSS工作，我們可以將它放回樣式組件中。 我對你的代碼做的主要改變是使用<LineUI />組件來包裝每一行，以及上面的新CSS。

 const titles = [ "Id", "Type", "Name", "Category", "Client", "Date", "Watched", "Amount", "State", "Delete" ]; const data = [ { id: 23, type: "test", name: "joaaaahnny cageasdasdasd cageasdasdasd cageasdasdasd cageasdasdasd", category: "selasdasler", client: "custom", date: "01-01-2019", watched: "yes", amount: 1231, state: "pending", delete: "button" }, { id: 211, type: "test", name: "johnny cage", category: "seller", client: "custsdsom", date: "01-01-2019", watched: "yes", amount: 1231, state: "pending", delete: "button" }, { id: 2222, type: "test", name: "johnny cage", category: "seller", client: "custom", date: "01-01-2019", watched: "yes", amount: 1231, state: "pending", delete: "button" }, { id: 2222, type: "test", name: "johnny cage", category: "seller", client: "custom", date: "01-01-2019", watched: "yes", amount: 1231, state: "pending", delete: "button" }, { id: 2222, type: "test", name: "johnny cage", category: "seller", client: "custom", date: "01-01-2019", watched: "yes", amount: 1231, state: "pending", delete: "button" }, { id: 2222, type: "test", name: "johnny cage", category: "seller", client: "custom", date: "01-01-2019", watched: "yes", amount: 1231, state: "pending", delete: "button" }, { id: 2222, type: "test", name: "johnny cage", category: "seller", client: "custom", date: "01-01-2019", watched: "yes", amount: 1231, state: "pending", delete: "button" } ]; const TableWrapperUI = styled.div` display: grid; box-sizing: border-box; width: 100%; border: 1px solid #dbeaf4; grid-template-columns: repeat( ${props => props.columns && props.columns}, minmax(auto, max-content) ); padding: 5px; > * { padding: 5px; } `; const LineUI = styled.div` display: contents; > * { padding: 5px; border-bottom: 1px solid #dbeaf4; } :hover > * { background-color: #dbeaf4; cursor: pointer; overflow: visible; } `; const Table = ({ children, titles, data }) => { const [amountColumns, setAmountColumns] = React.useState(0); React.useEffect(() => { setAmountColumns(titles.length); }, []); const displayData = data => { return data.map((x, idx) => { return ( <React.Fragment key={idx}> <LineUI> {Object.keys(x).map((value, ids) => ( <span key={ids}>{x[value]}</span> ))} </LineUI> </React.Fragment> ); }); }; const displayTitles = titles => { return titles.map((title, idx) => { return <span key={idx}>{title}</span>; }); }; return ( amountColumns > 0 && ( <TableWrapperUI columns={amountColumns}> {displayTitles(titles)} {displayData(data)} </TableWrapperUI> ) ); }; function App() { return ( <div className="App"> <Table columns={10} titles={titles} data={data} /> </div> ); } ReactDOM.render(<App />, document.getElementById("root")) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.3.2/styled-components.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script> <div id="root"></div> 

Answer 3

這是基於網格的解決方案，使用兩個不同的行和網格。

1）帶網格的標題行

2）表格網格與網格

RefCode此鏈接： https ：//codesandbox.io/embed/hopeful-pascal-hfdzx

更新的CSS：

const TableRowUI = styled.div`
  display: grid;
  box-sizing: border-box;
  width: 100%;
  border-top: 1px solid #dbeaf4;
  grid-template-columns: repeat(
    ${props => props.columns && props.columns},
    1fr
  );
  justify-items: center;
  justify-content: space-between;
  > span {
    padding: 5px;
    justify-self: left;
  }
`;

const TableHeadUI = styled.div`
  display: grid;
  box-sizing: border-box;
  width: 100%;
  border-bottom: 1px solid #dbeaf4;
  grid-template-columns: repeat(
    ${props => props.columns && props.columns},
    1fr
  );
  justify-items: center;
  justify-content: space-between;
  > span {
    padding: 5px;
    justify-self: left;
  }
`;

最終代碼段：

https://codesandbox.io/embed/hopeful-pascal-hfdzx

Answer 4

使用table而不是span簡單。

Codesandbox示例 - 鏈接

 table { border: 1px solid #dbeaf4; } table tbody tr:hover { background: #dbeaf4; } table tbody td { border-top: 1px solid #dbeaf4; } th, td { text-align: left; padding: 5px; } 

 <table> <thead> <tr> <th>Id</th> <th>Type</th> <th>Name</th> <th>Category</th> <th>Client</th> <th>Date</th> <th>Watched</th> <th>Amount</th> <th>State</th> <th>Delete</th> </tr> </thead> <tbody> <tr> <td>23</td> <td>test</td> <td>joaaaahnny cageasdasdasd cageasdasdasd cageasdasdasd cageasdasdasd</td> <td>selasdasler</td> <td>custom</td> <td>01-01-2019</td> <td>yes</td> <td>1231</td> <td>pending</td> <td>button</td> </tr> <tr> <td>211</td> <td>test</td> <td>johnny cage</td> <td>seller</td> <td>custsdsom</td> <td>01-01-2019</td> <td>yes</td> <td>1231</td> <td>pending</td> <td>button</td> </tr> <tr> <td>2222</td> <td>test</td> <td>johnny cage</td> <td>seller</td> <td>custom</td> <td>01-01-2019</td> <td>yes</td> <td>1231</td> <td>pending</td> <td>button</td> </tr> <tr> <td>2222</td> <td>test</td> <td>johnny cage</td> <td>seller</td> <td>custom</td> <td>01-01-2019</td> <td>yes</td> <td>1231</td> <td>pending</td> <td>button</td> </tr> <tr> <td>2222</td> <td>test</td> <td>johnny cage</td> <td>seller</td> <td>custom</td> <td>01-01-2019</td> <td>yes</td> <td>1231</td> <td>pending</td> <td>button</td> </tr> <tr> <td>2222</td> <td>test</td> <td>johnny cage</td> <td>seller</td> <td>custom</td> <td>01-01-2019</td> <td>yes</td> <td>1231</td> <td>pending</td> <td>button</td> </tr> <tr> <td>2222</td> <td>test</td> <td>johnny cage</td> <td>seller</td> <td>custom</td> <td>01-01-2019</td> <td>yes</td> <td>1231</td> <td>pending</td> <td>button</td> </tr> </tbody> </table> 

Answer 5

您可以在表格中添加所有數據，以便輕松實現https://codesandbox.io/s/hidden-moon-p6emo