gpt4 book ai didi

html - CSS 悬停在水平行

转载 作者:太空宇宙 更新时间:2023-11-03 22:34:06 24 4
gpt4 key购买 nike

在这张 table 上,我应用了一个 CSS来自这里的例子 http://gridviewscroll.aspcity.idv.tw/Demo.aspx和例子 https://github.com/twlikol/GridViewScroll

<table cellspacing="0" id="gvMain2" style="width: 100%; border-collapse: collapse;"> 
<tr class="GridViewScrollHeader">
<th>StandardCost</th>
<th>ListPrice</th>
<th>SafetyStockLevel</th>
<th>SellStartDate</th>
<th>SellEndDate</th>
<th>ModifiedDate</th>
<th>ProductID</th>
<th>Name</th>
<th>Number</th>
<th>ReorderPoint</th>
<th>Weight</th>
</tr>
<tr class="GridViewScrollItem">
<td>747</td>
<td>HL Mountain Frame - Black, 38</td>
<td>FR-M94B-38</td>
<td>375</td>
<td>2.68</td>
<td>739.0410</td>
<td>1349.6000</td>
<td>500</td>
<td>7/1/2001 12:00:00 AM</td>
<td>&nbsp;</td>
<td>3/11/2004 10:01:36 AM</td>
</tr>
</table>

CSS section Header 可以指定颜色

.GridViewScrollHeader TH,
.GridViewScrollHeader TD {
padding: 10px;
font-weight: normal;
white-space: nowrap;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
background-color: cornflowerblue;
color: palegoldenrod;
text-align: left;
vertical-align: bottom;
cursor:default;
}

CSS section Item at level TD 分配颜色和边框,当事件 TD:hover 被触发时单元格改变颜色

.GridViewScrollItem TD {
padding: 10px;
white-space: nowrap;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
/*background-color: lemonchiffon;*/
color: blue;
background-color: gray;
/*cursor: pointer;*/
}

/* this work and change color at cell level */
.GridViewScrollItem TD:hover {
background-color: yellow;
cursor: pointer;
}

CSS 悬停在水平行 ??在线,TR level 不触发悬停事件,好像没有说明,当然是我的错误,即使引用 TR 似乎是正确的。

/* this section not have effect 
- the cursor not change form
- the background color not change
*/
.GridViewScrollItem TR {
background-color: #b8d1f3;
}

.GridViewScrollItem TR:hover {
/* background-color: #00C080FF; */
background-color: yellow;
cursor:pointer;
}

最佳答案

行颜色确实发生了变化,但在彩色 TD 之下。因此,将效果直接应用于列:

.GridViewScrollItem:hover TD {
/* background-color: #00C080FF; */
background-color: yellow;
cursor:pointer;
}

此外,.GridViewScrollItem 是您提到的实际 TR,所以基本上您的原始 CSS 规则说:

tr tr:hover {};

工作代码笔示例: https://codepen.io/robertspier/pen/LOjMNW

关于html - CSS 悬停在水平行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47305686/

24 4 0
文章推荐: c# - 是否可以将此 Delphi 函数转换为 C# 方法?如何?
文章推荐: javascript - 如何在 Node.js 中将 OpenCV 图像矩阵编码为 base64
文章推荐: html - 当