悬停在列和行上,具有多种背景颜色
Hover on column and rows, with multiple background colors
我知道这可以用行来完成,但我无法让它也适用于列。我需要能够对我的列进行颜色编码,但在所有列中保持相同的悬停颜色。下面是我目前的代码,我需要将第一列的背景颜色设置为灰色,并将其他所有内容保持为白色。同时在所有行和列中保持相同的悬停颜色。希望这是有道理的!
.grey-column {
background-color: grey;
}
.data-table {
overflow: hidden;
border: solid black;
border-collapse: collapse;
border-width: 1px 2px 2px 1px;
}
.data-cell {
padding: 10px;
font-size: 14px;
position: relative;
border: solid black;
border-width: 1px 1px 1px 1px;
}
.data-row:hover {
padding: 10px;
background-color: #ffa;
}
.data-cell::before {
content: "";
position: absolute;
top: 0;
left: -5000px;
width: 10000px;
height: 100%;
z-index: -10;
}
.data-cell:hover::after {
content: "";
position: absolute;
background-color: #ffa;
left: 0;
top: -5000px;
height: 10000px;
width: 100%;
z-index: -5;
}
<table class="data-table">
<tbody>
<tr class="data-row">
<td class="grey-column">I should change to hover color</td>
<td class="data-cell">Cell 2</td>
<td class="data-cell">Cell 3</td>
<td class="data-cell">Cell 4</td>
</tr>
<tr class="data-row">
<td class="grey-column">I should change to hover color</td>
<td class="data-cell">Cell 2</td>
<td class="data-cell">Cell 3</td>
<td class="data-cell">Cell 4</td>
</tr>
<tr class="data-row">
<td class="grey-column">I should change to hover color</td>
<td class="data-cell">Cell 2</td>
<td class="data-cell">Cell 3</td>
<td class="data-cell">Cell 4</td>
</tr>
</tbody>
</table>
已更新
我想这对你有用。
我删除了 background
.grey-column
并添加了这个样式。
.grey-column:after {
background-color: grey;
position:absolute;
left:0;
right:0;
z-index:-20;
top:0;
bottom:0;
content:'';
}
.grey-column{
position:relative;
}
你的工作示例。
.grey-column:after {
background-color: grey;
position:absolute;
left:0;
right:0;
z-index:-20;
top:0;
bottom:0;
content:'';
}
.grey-column{
position:relative;
}
.data-table {
overflow: hidden;
border: solid black;
border-collapse: collapse;
border-width: 1px 2px 2px 1px;
}
.data-cell {
padding: 10px;
font-size: 14px;
position: relative;
border: solid black;
border-width: 1px 1px 1px 1px;
}
.data-row:hover {
padding: 10px;
background-color: #ffa;
}
.data-cell::before {
content: "";
position: absolute;
top: 0;
left: -5000px;
width: 10000px;
height: 100%;
z-index: -10;
}
.data-cell:hover::after,.grey-column:hover::after {
content: "";
position: absolute;
background-color: #ffa;
left: 0;
top: -5000px;
height: 10000px;
width: 100%;
z-index: -5;
}
<table class="data-table">
<tbody>
<tr class="data-row">
<td class="grey-column">I should change to hover color</td>
<td class="data-cell">Cell 2</td>
<td class="data-cell">Cell 3</td>
<td class="data-cell">Cell 4</td>
</tr>
<tr class="data-row">
<td class="grey-column">I should change to hover color</td>
<td class="data-cell">Cell 2</td>
<td class="data-cell">Cell 3</td>
<td class="data-cell">Cell 4</td>
</tr>
<tr class="data-row">
<td class="grey-column">I should change to hover color</td>
<td class="data-cell">Cell 2</td>
<td class="data-cell">Cell 3</td>
<td class="data-cell">Cell 4</td>
</tr>
</tbody>
</table>
如有任何疑问,请尽管询问。希望对您有所帮助。
我知道这可以用行来完成,但我无法让它也适用于列。我需要能够对我的列进行颜色编码,但在所有列中保持相同的悬停颜色。下面是我目前的代码,我需要将第一列的背景颜色设置为灰色,并将其他所有内容保持为白色。同时在所有行和列中保持相同的悬停颜色。希望这是有道理的!
.grey-column {
background-color: grey;
}
.data-table {
overflow: hidden;
border: solid black;
border-collapse: collapse;
border-width: 1px 2px 2px 1px;
}
.data-cell {
padding: 10px;
font-size: 14px;
position: relative;
border: solid black;
border-width: 1px 1px 1px 1px;
}
.data-row:hover {
padding: 10px;
background-color: #ffa;
}
.data-cell::before {
content: "";
position: absolute;
top: 0;
left: -5000px;
width: 10000px;
height: 100%;
z-index: -10;
}
.data-cell:hover::after {
content: "";
position: absolute;
background-color: #ffa;
left: 0;
top: -5000px;
height: 10000px;
width: 100%;
z-index: -5;
}
<table class="data-table">
<tbody>
<tr class="data-row">
<td class="grey-column">I should change to hover color</td>
<td class="data-cell">Cell 2</td>
<td class="data-cell">Cell 3</td>
<td class="data-cell">Cell 4</td>
</tr>
<tr class="data-row">
<td class="grey-column">I should change to hover color</td>
<td class="data-cell">Cell 2</td>
<td class="data-cell">Cell 3</td>
<td class="data-cell">Cell 4</td>
</tr>
<tr class="data-row">
<td class="grey-column">I should change to hover color</td>
<td class="data-cell">Cell 2</td>
<td class="data-cell">Cell 3</td>
<td class="data-cell">Cell 4</td>
</tr>
</tbody>
</table>
已更新
我想这对你有用。
我删除了 background
.grey-column
并添加了这个样式。
.grey-column:after {
background-color: grey;
position:absolute;
left:0;
right:0;
z-index:-20;
top:0;
bottom:0;
content:'';
}
.grey-column{
position:relative;
}
你的工作示例。
.grey-column:after {
background-color: grey;
position:absolute;
left:0;
right:0;
z-index:-20;
top:0;
bottom:0;
content:'';
}
.grey-column{
position:relative;
}
.data-table {
overflow: hidden;
border: solid black;
border-collapse: collapse;
border-width: 1px 2px 2px 1px;
}
.data-cell {
padding: 10px;
font-size: 14px;
position: relative;
border: solid black;
border-width: 1px 1px 1px 1px;
}
.data-row:hover {
padding: 10px;
background-color: #ffa;
}
.data-cell::before {
content: "";
position: absolute;
top: 0;
left: -5000px;
width: 10000px;
height: 100%;
z-index: -10;
}
.data-cell:hover::after,.grey-column:hover::after {
content: "";
position: absolute;
background-color: #ffa;
left: 0;
top: -5000px;
height: 10000px;
width: 100%;
z-index: -5;
}
<table class="data-table">
<tbody>
<tr class="data-row">
<td class="grey-column">I should change to hover color</td>
<td class="data-cell">Cell 2</td>
<td class="data-cell">Cell 3</td>
<td class="data-cell">Cell 4</td>
</tr>
<tr class="data-row">
<td class="grey-column">I should change to hover color</td>
<td class="data-cell">Cell 2</td>
<td class="data-cell">Cell 3</td>
<td class="data-cell">Cell 4</td>
</tr>
<tr class="data-row">
<td class="grey-column">I should change to hover color</td>
<td class="data-cell">Cell 2</td>
<td class="data-cell">Cell 3</td>
<td class="data-cell">Cell 4</td>
</tr>
</tbody>
</table>
如有任何疑问,请尽管询问。希望对您有所帮助。