html - 悬停时如何更改表数据单元背景颜色和数据单元内的链接文本

标签 html css html-table yui

我目前有以下 css 代码:

.tableLinks a{color:#002a5c; text-decoration: underline;}
.tableLinks:hover a{color:#fff; text-decoration: underline;background-color:#8aa7ca;}
.tableLinks:visited{color:#fff; text-decoration: underline;background-color:#8aa7ca;}

html 表格结构:

<td class="tablelinks">
    <div class="yui-dt-class">
         <a href="">the link</a>
    </div>
</td>

我正在尝试使用 YUI 数据表对表数据单元格内的链接进行样式设置。

我调用了 className: 'tablelinks' 来尝试设置单元格悬停状态的样式。

我的意图是在悬停状态下更改表格数据单元格背景颜色的全宽和高度,并将链接文本更改为白色。

我尝试使用不同变体的代码,但似乎无法使其正确。任何指导都会很棒!

最佳答案

您的 CSS 选择器不匹配,区分大小写。您有 .tableLinks 大写“L”和 class="tablelinks" 小写“l”。

关于html - 悬停时如何更改表数据单元背景颜色和数据单元内的链接文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22917227/

相关文章:

css - 表中行的灯箱或模态样式效果

reactjs - 如何对 react-bootstrap Table 组件进行排序

html - 响应式表格行,带内联 block 的跨浏览器支持

html - Safari 在不扩展表格的情况下包装 TD

javascript - 为什么在收缩包含 flexbox 的 Canvas 时 BoundingClientRect 不折叠?

html - 如何从表格 html 设计中删除无用的空间

html - Ruby on Rails 密码字段和文本字段对齐

css - 如何在 ruby​​ on rails 上基于 Bootstrap 的导航栏中显示图像

CSS 填充剩余容器宽度

javascript - jQuery 淡入淡出元素的 Z-index 问题