[英]CSS Grid how to select row to add hover effect?
I need to select a row to add a hover
effect on it. 我需要选择一行来为其添加
hover
效果。 I'm trying to wrap all cells in a row with a div
, but all markup is destroyed. 我试图用
div
包装所有单元格,但所有标记都被销毁。 Does anyone have any idea how to do it? 有谁知道怎么做? Is this even possible?
这甚至可能吗?
Check here for full code: https://codesandbox.io/s/goofy-easley-w5rrg 点击此处查看完整代码: 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;
`;
You cannot select a whole row from a child grid, but you can fake it if it's about highlighting the background. 您不能从子网格中选择整行,但如果是关于突出显示背景,则可以伪造它。
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 https://codesandbox.io/s/affectionate-colden-m34od
display: contents;
to the rescue! 救援!
Kinda. 均田。
Depending on your browser support and/or accessibility requirements , we can achieve the effect you want, using the general structure you have, with the relatively new display: contents
property . 根据您的浏览器支持和/或辅助功能要求 ,我们可以使用相对较新的
display: contents
属性 ,使用您拥有的常规结构来实现所需的效果。
Describing display: contents
is somewhat difficult, so I'll point to this excellent CSS Tricks article . 描述
display: contents
有点困难,所以我将指出这篇优秀的CSS Tricks文章 。
To use it, we'll wrap each group of <span>
elements in a row into a <div>
with display: contents
. 要使用它,我们会将每组
<span>
元素连续包装到带有display: contents
的<div>
。 This allows us to target the div:hover > span
elements and apply a background color. 这允许我们以
div:hover > span
元素为目标并应用背景颜色。
There were a few others small changes required to your styling, like making the <span>
elements fill the available width. 您的样式还需要进行一些其他小的更改,例如使
<span>
元素填充可用宽度。 Here's a working example: 这是一个有效的例子:
.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>
With React and Styled Components 使用React和Styled Components
Now that we have the CSS working, we can put this back into a styled-components. 现在我们已经有了CSS工作,我们可以将它放回样式组件中。 The main change I've made to your code is to use the
<LineUI />
component to wrap each row, along with the new CSS from above. 我对你的代码做的主要改变是使用
<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>
Here is Grid-based Solution, Use two different rows with a grid. 这是基于网格的解决方案,使用两个不同的行和网格。
1) Header row with grid 1)带网格的标题行
2) Table grid body with grid 2)表格网格与网格
RefCode this link: https://codesandbox.io/embed/hopeful-pascal-hfdzx RefCode此链接: https ://codesandbox.io/embed/hopeful-pascal-hfdzx
Updated CSS: 更新的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;
}
`;
Final code snippet: 最终代码段:
https://codesandbox.io/embed/hopeful-pascal-hfdzx https://codesandbox.io/embed/hopeful-pascal-hfdzx
Make it simple to use table
instead of span
. 使用
table
而不是span
简单。
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>
您可以在表格中添加所有数据,以便轻松实现https://codesandbox.io/s/hidden-moon-p6emo
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.