如何使 HTML table 行背景随内联悬停而变化 CSS

Question

我有一个 HTML table，其中包含不同颜色的列。这是通过为每个 table 单元格 'td' 元素分配一个用适当颜色定义的 CSS class 来完成的。

任何 table 行的背景颜色在鼠标悬停时发生变化。这是通过我的 HTML 文档的样式块中的以下 CSS 声明完成的：

table tr:hover td { background-color: pink; }

一切都很好。但我需要使用内联样式字符串来完成这项工作。如：<table style="...">.

如何做到这一点？

我需要将 table 放入内容管理系统中，该系统不能很好地适应自定义 CSS 样式块干预。

建议的解决方法 here 将不起作用，因为它定义了突出显示前后的颜色。这必须为整行定义，以便整行在悬停时突出显示。但是当悬停被移除时，整行将不得不 return 到它之前的颜色，并且这些颜色是在单元格而不是行的级别定义的。

Answer 1

你不能。

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

Answer 2

首先，您不能使用内联 css，这是一种不好的做法，会使代码变得更长且更难阅读。只需在 html 的头部创建一个名为 style.css 和 link 的外部文件或者在头部使用 <style> </style> 标签您的 html，但更推荐使用外部文件，因为它将标记和样式分开，您也可以在另一个项目中使用相同的 css 文件。

无论如何，这是您问题的答案

您的问题没有解决方案，因为内联 css 不能使用选择器或伪类，例如..

<div class="div1" style="div2 {background-color: red;}"></div>

<div class="div2" style=""></div>

这样的事情是 不可能的 ，因为 style="" 属性只适用于作为属性持有者的元素，它不能使用 css 选择器，例如 div2{} 或伪类选择器，例如 div1:hover

所以解决您问题的唯一方法是在 header 中使用 <style></style> 标签或使用外部样式 sheet.

如果需要，您可以使用内联 Javascript 来检查是否悬停以执行为您更改背景的功能。

另外，也请参考这个答案。 CSS Pseudo-classes with inline styles

Answer 3

好的 - 场景：在 html table 中使用内联样式，使 table 由 table 和整个 self-contained.

（这样 table 就可以在您无法访问 html 页面的 header 块的情况下使用——就像这种情况一样，例如，对于 Blogger 使用的内容管理系统，您可以将 html 插入到博客 post 的 body 中，但不能为给定的定义样式块没有打开一罐蠕虫的页面）。

挑战：定义一个更改 table 行背景颜色的鼠标悬停事件。

这是一个挑战，因为每个 table 列都有不同的颜色，并且每个单元格都定义了自己的颜色。然而，内联样式优先于其他样式，内联 onmouseover 指令似乎不起作用。

解决方案 1.

为每个单元格定义内联样式，使table成为table。
使用 body 中定义的 <style> 块覆盖内联样式。
样式块中唯一的语句是实现鼠标悬停。

注意：必须在任何鼠标悬停样式属性中使用!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>

方案二

为每个单元格定义类，使用样式块中定义的 CSS 类。
将样式块放入 html body.

将样式块全部放入类，以及鼠标悬停指令。

 <!-- 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 似乎更明智，因为关于 <body> blocks to go-unrecognised. It puts all essential styling inline, and keeps only the nice-to-have mouseover in the` 块内 <style> 块的潜力的说法 - 因为那似乎是唯一可能存在的地方。

如何使 HTML table 行背景随内联悬停而变化 CSS

How make HTML table row background change with hover by inline CSS

html

css

html-table

hover

inline-styles