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