如何通过内联 CSS 使 HTML 表格行背景通过悬停改变
Posted
技术标签:
【中文标题】如何通过内联 CSS 使 HTML 表格行背景通过悬停改变【英文标题】：How make HTML table row background change with hover by inline CSS 【发布时间】：2021-12-29 20:02:52 【问题描述】：我有一个包含不同颜色列的 html 表格。这是通过为每个表格单元格“td”元素分配一个用适当颜色定义的 CSS 类来完成的。
任何表格行的背景颜色在鼠标悬停时都会发生变化。这是通过我的 HTML 文档的样式块中的以下 CSS 声明来完成的：
table tr:hover td background-color: pink;
这一切都很好。但我需要使用内联样式字符串来完成这项工作。如：<table style="...">。
如何做到这一点？
我需要将表格放入不能很好地适应自定义 CSS 样式块干预的内容管理系统中。
建议的解决方法here 将不起作用，因为它定义了突出显示颜色之前和之后。这必须为整行定义，以便整行在悬停时突出显示。但是当悬停被移除时，整行将不得不返回到其先前的颜色，并且这些颜色不是在行级别而是在单元格级别定义的。
【问题讨论】：
你不能通过javascript在页面头部注入<style>标签吗？
Blogger 上没有。因此，在自己开发的 html 上使用内联样式会更整洁，也不会让人头疼。
【参考方案1】：
好的 - 场景：在 html 表格中使用内联样式，使表格可移植且完全独立。
（以便在您无法访问 html 页面的标题块的情况下使用该表格 - 例如，在 Blogger 使用的内容管理系统中，您可以将 html 插入到博客文章的正文中，但不能在不打开一罐蠕虫的情况下为给定页面定义样式块。
挑战：定义一个改变表格行背景颜色的鼠标悬停事件。
这是一个挑战，因为每个表格列都有不同的颜色，并且每个单元格都定义了自己的颜色。然而内联样式优先于其他样式，并且内联 onmouseover 指令似乎不起作用。
解决方案 1。
为每个单元格定义内联样式，以使表格可移植。
使用在正文中定义的 <style> 块覆盖内联样式。
样式块中唯一的语句是实现 鼠标悬停。
注意：必须在任何 mouseover 样式属性中使用 !important 声明，否则它将无法声明优先于内联样式，并且无效。
<body>
<!-- style block defined in HTML body
to define CSS elements that could not be used inline.
!important declaration necessary
to override inline styles -->
<style type="text/css">
table tr:hover td
background-color: #0ABC1F !important;
</style>
<table>
<thead><tr><th scope="col">one</th>
<th scope="col">two</th>
<th scope="col">three</th></tr>
</thead>
<!-- define inline styles for each table cell
to make table portable -->
<tr>
<td style="background-color: #ABCDEF;color:#000000;"
>1000</td>
<td style="background-color: #FEDCBA;color:#000000;"
>W</td>
<td style="background-color: #ABABAB;color:#000000;"
>1</td>
</tr>
</body>
解决方案 2。
使用样式块中定义的 CSS 类为每个单元格定义类。
将样式块放在 html 正文中。
将所有类以及鼠标悬停指令放入样式块中。
<!-- define CSS style class for each table cell
in style block inside HTML body
to make table portable -->
<style type="text/css">
table tr:hover td
background-color: #0ABC1F !important;
.one background-color: #ABCDEF;color:#000000;
.two background-color: #FEDCBA;color:#000000;
.three background-color: #ABABAB;color:#000000;
</style>
<table>
<thead><tr><th scope="col">one</th>
<th scope="col">two</th>
<th scope="col">three</th></tr>
</thead>
<tr>
<td class="one">1000</td>
<td class="two">W</td>
<td class="three">1</td>
</tr>
选项 1 似乎更明智，因为关于<style> 块内部<body> blocks to go-unrecognised. It puts all essential styling inline, and keeps only the nice-to-have mouseover in the` 块的潜力的说法 - 因为那似乎是唯一可能存在的地方。
【讨论】：
【参考方案2】：第一件事，你不能使用内联css，这是一种不好的做法，会使代码变得更长更难阅读。只需创建一个名为 style.css 的外部文件并将其链接到 html 的头部 或 在 html 的头部使用 <style> </style> 标记，但更推荐使用外部文件，因为它将标记和样式，您也可以在另一个项目中使用相同的 css 文件。
无论如何，这是您问题的答案
您的问题没有解决方案，因为内联 css 不能使用选择器或伪类，例如..
<div class="div1" style="div2 background-color: red;"></div>
<div class="div2" style=""></div>
这样的事情是不可能，因为style=""属性只适用于该属性持有者的元素，它不能使用css选择器如@ 987654327@或div1:hover等伪类
所以解决问题的唯一方法是在标题中使用<style></style> 标记或使用外部样式表。
如果你愿意，你可以使用内联 Javascript 来检查悬停来执行一个为你改变背景的函数。
另外，请参考这个答案。 CSS Pseudo-classes with inline styles
【讨论】：
感谢您花时间详细说明。虽然在这种情况下我必须使用内联 CSS。这实际上比另一种方法更整洁、更快、更令人愉快，即打开 Blogger 主题编辑器中生锈的各种螺丝钉和钉子的可怕混乱，我必须在其中插入某种条件 CSS 语句。当我尝试这样做失败时。令我震惊的是，在这种情况下，具有内联样式的表格实际上非常优雅。顺便说一句，你使用的那个短语——“你不能”——让我颤抖。这让我想在任何地方尽我所能！ 好吧，除了使用内联 CSS 是否可以接受的问题之外，在样式参数中放置诸如:hover 之类的伪选择器是不可能的。此外，不建议在正文中放置<style> 标签（尽管它的作用域版本是part of the HTML5 standard），因为浏览器可能会以不可预知的方式解释它。
在 html 中使用
诚然，内联 CSS 是丑陋且模糊的。但我的意思是，它似乎是一个不错的工具，可以打包一大块 html 以使其可移植。
我使用了“you mustn't”短语，因为内联 css 效率低下，您必须为每个 html 标签键入代码，这也会使代码难以阅读，因此如果您在头部或外部 CSS 文件中使用 style 标签，那么您可以为多个项目使用相同的样式，并且您不必为不同的元素键入相同的样式，您可以用逗号分隔它们。 html , body, h1, form <!-- styles --> 【参考方案3】：
你不能。
使用 CSS 样式表或<style></style>
【讨论】：
这真的是评论，而不是答案。 @markling 我能知道您接受这个完全是评论而不是答案的答案的原因吗？ 是的，因为结合 Jasper 的评论，它让我找到了答案。它包含答案，尽管您是对的-这是一个垃圾答案。我有点认为刻度线是一个持有位置。我想我可以编辑它，让它变得明智。但可能已经晚了。我累了，赶时间。你知道是怎么回事。这并不令人满意。出于某种原因，我不觉得我可以打勾自己的答案——因为这个答案把我带到了那里……等/ 如果您认为这是一个垃圾决定，请务必举报。你会有一个很好的理由。 没关系，这不像是在求你接受我的回答。很久以前，当我刚刚发布这个答案时，我也标记了这个答案。无论如何，希望你找到你需要的东西以上是关于如何通过内联 CSS 使 HTML 表格行背景通过悬停改变的主要内容，如果未能解决你的问题，请参考以下文章