CSS Grid如何选择行以添加悬停效果？

Posted 2023-03-06

【中文标题】CSS Grid如何选择行以添加悬停效果？

【英文标题】：CSS Grid how to select row to add hover effect?

【发布时间】：2019-11-16 01:39:16

【问题描述】：

我需要选择一行来为其添加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;
`;

【问题讨论】：

重复：***.com/q/48108879/8620333

重复：How to target a specific column or row in CSS Grid Layout?

以下解决方案是否能解决您的问题？

【参考方案1】：

display: contents; 来救援！

有点。

根据你的browser support and/or accessibility requirements，我们可以达到你想要的效果，使用你有的一般结构，比较新的display: contents property。

描述display: contents 有点困难，所以我会指出这个出色的CSS Tricks article。

为了使用它，我们将一行中的每组<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 和样式化组件

现在我们的 CSS 已经工作了，我们可以把它放回一个 styled-components 中。我对您的代码所做的主要更改是使用 <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>

【参考方案2】：

你不能从子网格中选择一整行，但如果是为了突出背景，你可以伪造它。

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

【讨论】：

感谢您的回答，但存在一些错误。只有当我指向跨度时它才会悬停。可以悬停整行吗？那个悬停超出了我的桌子范围

添加溢出：隐藏到父级（参见 CSS cmets），随时制作伪，仅在悬停时更改颜色。

@YerlanYeszhanov 来自我的评论 codesandbox.io/s/affectionate-colden-m34od

【参考方案3】：

这是基于网格的解决方案，将两个不同的行与一个网格一起使用。

1) 带有网格的标题行

2) 表格网格体带网格

参考此链接：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;
  
`;

最终代码sn-p：

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

【参考方案4】：

让使用table 代替span 变得简单。

代码沙盒示例 - Link

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>

【参考方案5】：

您可以轻松地将所有数据添加到表格中 https://codesandbox.io/s/hidden-moon-p6emo

【讨论】：

那个组件会在不同的地方使用，会有动态的数据，我需要自适应的列大小