如何在悬停时仅突出显示表格的行，但最后一列除外？

huangapple
go评论110阅读模式
英文:

How do I only highlight rows of a table on hover except the last column?

问题

问题类似于此帖子：https://stackoverflow.com/questions/41770244/html-table-how-highlight-row-on-hover-except-first-column。然而，这里的回复不是我要的效果。我希望当我悬停在任何一个列上时，前两列都会高亮显示，而当我悬停在第三列上时，不会有任何高亮显示。

英文:

The problem I am facing is similar to this post: https://stackoverflow.com/questions/41770244/html-table-how-highlight-row-on-hover-except-first-column. However the replies here are not the effect that I am looking for. I am looking for both the first 2 columns to light up when I hover over either one, and for the 3rd column to not light up anything at all when I hover over it.

答案1

得分: 1

请不要使用任何 [tag:javascript] 或 [tag:jquery]，只需两个 [tag:css] 规则即可。

选择所有 tr:hover，然后通过使用 td:not(:last-of-type) 来排除最后一列。

然后禁用最后一列上的所有 pointer-events，以防止触发 hover 事件。

  1. table>tbody>tr:hover td:not(:last-of-type) {
  2.   background-color: red;
  3. }
  5. table>tbody>tr>td:last-of-type {
  6.   pointer-events: none;
  7. }
英文:

Please don't use any [tag:javascript] nor [tag:jquery] for this, two [tag:css] rule's are enough.

Select all the tr:hover, and then exclude the last col by using td:not(:last-of-type).

Then disable all pointer-events on the last column to disable that triggering the hover.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. table&gt;tbody&gt;tr:hover td:not(:last-of-type) {
  2.   background-color: red;
  3. }
  5. table&gt;tbody&gt;tr&gt;td:last-of-type {
  6.   pointer-events: none;
  7. }

<!-- language: lang-html -->

  1. &lt;table border cellpadding=&quot;5&quot;&gt;
  2.   &lt;tbody&gt;
  3.     &lt;tr&gt;
  4.       &lt;td&gt;F&lt;/td&gt;
  5.       &lt;td&gt;o&lt;/td&gt;
  6.       &lt;td&gt;o&lt;/td&gt;
  7.       &lt;td&gt;B&lt;/td&gt;
  8.       &lt;td&gt;a&lt;/td&gt;
  9.       &lt;td&gt;r&lt;/td&gt;
  10.     &lt;/tr&gt;
  11.     &lt;tr&gt;
  12.       &lt;td&gt;F&lt;/td&gt;
  13.       &lt;td&gt;o&lt;/td&gt;
  14.       &lt;td&gt;o&lt;/td&gt;
  15.       &lt;td&gt;B&lt;/td&gt;
  16.       &lt;td&gt;a&lt;/td&gt;
  17.       &lt;td&gt;r&lt;/td&gt;
  18.     &lt;/tr&gt;
  19.   &lt;/tbody&gt;
  20. &lt;/table&gt;

<!-- end snippet -->

答案2

得分: -1

如果您需要在第三列中触发鼠标事件，这将无法在没有JavaScript的情况下完成。

问题是第三列应该被禁用。可以使用pointer-events:none来实现。但如果我们需要在第三列中触发鼠标事件，以下是解决方案：

您可以使用nth-child CSS伪类和一些JavaScript：

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

  1. 'mousemove mouseleave'.split(' ').forEach(name =>
  2.   $table.addEventListener(name, syncHover)
  3. );
  5. function syncHover(e) {
  7.   $table.querySelector('tr.hover')?.classList.remove('hover');
  9.   const $td = e.target.closest('td');
  11.   $td && [...$td.parentElement.children].indexOf($td) < 2 &&
  12.     $td.parentElement.classList.add('hover');
  14. }
  1. table tr.hover>td:nth-child(-n + 2) {
  2.   background: lightgray;
  3.   cursor: pointer;
  4. }
  6. table td {
  7.   padding: 5px 10px;
  8. }
  10. table {
  11.   border-collapse: collapse;
  12.   background: #eee;
  13. }
  1. <table id="$table">
  2.   <tr>
  3.     <td>col1</td>
  4.     <td>col2</td>
  5.     <td>col3</td>
  6.   </tr>
  7.   <tr>
  8.     <td>col1</td>
  9.     <td>col2</td>
  10.     <td>col3</td>
  11.   </tr>
  12.   <tr>
  13.     <td>col1</td>
  14.     <td>col2</td>
  15.     <td>col3</td>
  16.   </tr>
  17.   <tr>
  18.     <td>col1</td>
  19.     <td>col2</td>
  20.     <td>col3</td>
  21.   </tr>
  22. </table>
英文:

If you need mouse events in the 3rd column this cannot be done without JS.

The problem that the 3rd column should be disabled. It could be done with pointer-events:none. But if we need mouse events in the 3rd columns here's solution:

You could use the nth-child CSS pseudo class and some Javascript:

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. &#39;mousemove mouseleave&#39;.split(&#39; &#39;).forEach(name =&gt;
  2.   $table.addEventListener(name, syncHover)
  3. );
  5. function syncHover(e) {
  7.   $table.querySelector(&#39;tr.hover&#39;)?.classList.remove(&#39;hover&#39;);
  9.   const $td = e.target.closest(&#39;td&#39;);
  11.   $td &amp;&amp; [...$td.parentElement.children].indexOf($td) &lt; 2 &amp;&amp;
  12.     $td.parentElement.classList.add(&#39;hover&#39;);
  14. }

<!-- language: lang-css -->

  1. table tr.hover&gt;td:nth-child(-n + 2) {
  2.   background: lightgray;
  3.   cursor: pointer;
  4. }
  6. table td {
  7.   padding: 5px 10px;
  8. }
  10. table {
  11.   border-collapse: collapse;
  12.   background: #eee;
  13. }

<!-- language: lang-html -->

  1. &lt;table id=&quot;$table&quot;&gt;
  2.   &lt;tr&gt;
  3.     &lt;td&gt;col1&lt;/td&gt;
  4.     &lt;td&gt;col2&lt;/td&gt;
  5.     &lt;td&gt;col3&lt;/td&gt;
  6.   &lt;/tr&gt;
  7.   &lt;tr&gt;
  8.     &lt;td&gt;col1&lt;/td&gt;
  9.     &lt;td&gt;col2&lt;/td&gt;
  10.     &lt;td&gt;col3&lt;/td&gt;
  11.   &lt;/tr&gt;
  12.   &lt;tr&gt;
  13.     &lt;td&gt;col1&lt;/td&gt;
  14.     &lt;td&gt;col2&lt;/td&gt;
  15.     &lt;td&gt;col3&lt;/td&gt;
  16.   &lt;/tr&gt;
  17.   &lt;tr&gt;
  18.     &lt;td&gt;col1&lt;/td&gt;
  19.     &lt;td&gt;col2&lt;/td&gt;
  20.     &lt;td&gt;col3&lt;/td&gt;
  21.   &lt;/tr&gt;
  22. &lt;/table&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月6日 18:06:23
  • 转载请务必保留本文链接：https://go.coder-hub.com/76627700.html
  • css
  • html
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定