- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我需要选择一行以在其上添加 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;
`;
最佳答案
display: contents;
来救援!
有点。
取决于您的 browser support and/or accessibility requirements ,我们可以使用您拥有的一般结构,使用相对较新的 display: contents
property 来达到您想要的效果.
描述display: contents
有点困难,所以我会指出这个优秀的CSS Tricks article .
要使用它,我们将包装每组 <span>
一行中的元素变成<div>
与 display: contents
.这使我们能够定位 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 已经工作了,我们可以把它放回样式组件中。我对您的代码所做的主要更改是使用 <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>
关于html - CSS Grid如何选择行添加悬停效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56902735/
猫f1.txt阿曼维沙尔阿杰贾伊维杰拉胡尔曼尼什肖比特批评塔夫林现在输出应该符合上面给定的条件 最佳答案 您可以在文件读取循环中设置一个计数器并打印它, 计数=0 读取行时做 让我们数一数++ if
我正在尝试查找文件 1 和文件 2 中的共同行。如果公共(public)行存在,我想写入文件 2 中的行,否则打印文件 1 中的非公共(public)行。fin1 和 fin2 是这里的文件句柄。它读
我有这个 SQL 脚本: CREATE TABLE `table_1` ( `IDTable_1` int(11) NOT NULL, PRIMARY KEY (`IDTable_1`) );
我有 512 行要插入到数据库中。我想知道提交多个插入内容是否比提交一个大插入内容有任何优势。例如 1x 512 行插入 -- INSERT INTO mydb.mytable (id, phonen
如何从用户中选择user_id,SUB(row, row - 1),其中user_id=@userid我的表用户,id 为 1、3、4、10、11、23...(不是++) --id---------u
我曾尝试四处寻找解决此问题的最佳方法,但我找不到此类问题的任何先前示例。 我正在构建一个基于超本地化的互联网购物中心,该区域分为大约 3000 个区域。每个区域包含大约 300 个项目。它们是相似的项
preg_match('|phpVersion = (.*)\n|',$wampConfFileContents,$result); $phpVersion = str_replace('"','',
我正在尝试创建一个正则表达式,使用“搜索并替换全部”删除 200 个 txt 文件的第一行和最后 10 行 我尝试 (\s*^(\h*\S.*)){10} 删除包含的前 10 行空白,但效果不佳。 最
下面的代码从数据库中获取我需要的信息,但没有打印出所有信息。首先,我知道它从表中获取了所有正确的信息,因为我已经在 sql Developer 中尝试过查询。 public static void m
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
我试图在两个表中插入记录,但出现异常。您能帮我解决这个问题吗? 首先我尝试了下面的代码。 await _testRepository.InsertAsync(test); await _xyzRepo
这个基本的 bootstrap CSS 显示 1 行 4 列: Text Text Text
如果我想从表中检索前 10 行,我将使用以下代码: SELECT * FROM Persons LIMIT 10 我想知道的是如何检索前 10 个结果之后的 10 个结果。 如果我在下面执行这段代码,
今天我开始使用 JexcelApi 并遇到了这个:当您尝试从特定位置获取元素时,不是像您通常期望的那样使用sheet.getCell(row,col),而是使用sheet.getCell(col,ro
我正在尝试在我的网站上开发一个用户个人资料系统,其中包含用户之前发布的 3 个帖子。我可以让它选择前 3 条记录,但它只会显示其中一条。我是不是因为凌晨 2 点就想编码而变得愚蠢? query($q)
我在互联网上寻找答案,但找不到任何答案。 (我可能问错了?)我有一个看起来像这样的表: 我一直在使用查询: SELECT title, date, SUM(money) FROM payments W
我有以下查询,我想从数据库中获取 100 个项目,但 host_id 多次出现在 urls 表中,我想每个 host_id 从该表中最多获取 10 个唯一行。 select * from urls j
我的数据库表中有超过 500 行具有特定日期。 查询特定日期的行。 select * from msgtable where cdate='18/07/2012' 这将返回 500 行。 如何逐行查询
我想使用 sed 从某一行开始打印 n 行、跳过 n 行、打印 n 行等,直到文本文件结束。例如在第 4 行声明,打印 5-9,跳过 10-14,打印 15-19 等 来自文件 1 2 3 4 5 6
我目前正在执行验证过程来检查用户的旧密码,但问题是我无法理解为什么我的查询返回零行,而预期它有 1 行。另一件事是,即使我不将密码文本转换为 md5,哈希密码仍然得到正确的答案,但我不知道为什么会发生
我是一名优秀的程序员,十分优秀!