如何通过内联 CSS 使 HTML 表格行背景通过悬停改变答案

【问题标题】：How make HTML table row background change with hover by inline CSS如何通过内联 CSS 使 HTML 表格行背景通过悬停改变
【发布时间】：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 上使用内联样式会更整洁，也不会让人头疼。

标签： html css html-table hover inline-styles

【解决方案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{  }

【解决方案3】：

你不能。

使用 CSS 样式表或<style></style>

【讨论】：

这真的是评论，而不是答案。
@markling 我能知道您接受这个完全是评论而不是答案的答案的原因吗？
是的，因为结合 Jasper 的评论，它让我找到了答案。它包含答案，尽管您是对的-这是一个垃圾答案。我有点认为刻度线是一个持有位置。我想我可以编辑它，让它变得明智。但可能已经晚了。我累了，赶时间。你知道是怎么回事。这并不令人满意。出于某种原因，我不觉得我可以打勾自己的答案——因为这个答案把我带到了那里……等/
如果您认为这是一个垃圾决定，请务必举报。你会有一个很好的理由。
没关系，这不像是在求你接受我的回答。很久以前，当我刚刚发布这个答案时，我也标记了这个答案。无论如何，希望你找到你需要的东西