CSS 在一行中突出显示 col 的所有元素

Question

我有一个包含多个col元素的表格，其中一些元素的跨度为 3。如果我将鼠标悬停在一个单元格上，该单元格是 3 个跨度 col 的一部分，我希望该行中的所有 3 个单元格都突出显示。

查看下表以更好地理解我所指的Menu A等。我想要做的是在我将鼠标悬停在Menu A上时突出显示当天Menu A所有元素。 我试图通过使用兄弟姐妹来实现它，但没有以前的兄弟姐妹选择器，所以它只突出显示悬停的食物，以及它右边的食物。

例如，如果我将鼠标悬停在MainA1 ，我也希望突出显示SoupA1和GranishA1 。

有没有办法在 CSS 中做到这一点，还是应该使用 JavaScript 在悬停时将类应用于它们？

这就是我试图做的：

.selector .menu-a:hover, .selector .menu-a:hover~.menu-a {
  background: var(--color_hover);
}

这是我的表：

 :root { --color_unselected: #1ba1d6; --color_hover: #158ebe; --color_selected: #0a688d; } .selector { border: 1px solid var(--color_unselected); width: fit-content; } .selector a { display: block; color: white; text-align: center; padding: 4px; text-decoration: none; width: fit-content; } .selector { border-collapse: collapse; } .selector th, .date-text, .unselected { background: var(--color_unselected); } /*My question is about this part*/ .selector .menu-a:hover, .selector .menu-a:hover~.menu-a { background: var(--color_hover); }

 <table id="selector" class="selector"> <colgroup> <col span="1" class="date-text menu-day"> <col span="3" class="menu-a"> <col span="3" class="menu-b"> <col span="1" class="menu-n"> </colgroup> <tr> <th><a id="currMthText">2020-1</a></th> <th colspan="3"><a>Menu A</a></th> <th colspan="3"><a>Menu B</a></th> <th><a>Not eating</a></th> </tr> <!--Generated meals come here--> <tr id="line-1" class="line-1"> <td class="unselected"><a id="day-1">1</a></td> <td id="1-a-soup" class="menu-a unselected" )><a>SoupA1</a></td> <td id="1-a-main" class="menu-a unselected"><a>MainA1</a></td> <td id="1-a-garnish" class="menu-a unselected"><a>GarnishA1</a></td> <td id="1-b-soup" class="menu-b unselected"><a>SoupB1</a></td> <td id="1-b-main" class="menu-b unselected"><a>MainB1</a></td> <td id="1-b-garnish" class="menu-b unselected"><a>GarnishB1</a></td> <td id="1-n" class="unselected menu-n"> <a>Not eating</a> </td> </tr> <tr id="line-2" class="line-2"> <td><a id="day-2">2</a></td> <td id="2-a-soup" class="unselected menu-a"><a>SoupA2</a></td> <td id="2-a-main" class="unselected menu-a"><a>MainA2</a></td> <td id="2-a-garnish" class="unselected menu-a"><a>GarnishA2</a></td> <td id="2-b-soup" class="unselected menu-b"><a>SoupB2</a></td> <td id="2-b-main" class="unselected menu-b"><a>MainB2</a></td> <td id="2-b-garnish" class="unselected menu-b"><a>GarnishB2</a></td> <td id="2-n" class="unselected menu-n"> <a>Not eating</a> </td> </tr> </table>

Answer 1

这是一个依赖伪元素的技巧。 这个想法是在菜单的第一个项目上创建一个伪元素，这个元素应该溢出以覆盖所有其他元素，以便您始终在第一个元素上捕捉悬停效果。

 :root { --color_unselected: #1ba1d6; --color_hover: #158ebe; --color_selected: #0a688d; } .selector { border: 1px solid var(--color_unselected); width: fit-content; overflow:hidden; /* added */ } .selector a { display: block; color: white; text-align: center; padding: 4px; text-decoration: none; width: fit-content; } .selector { border-collapse: collapse; } .selector th, .date-text, .unselected { background: var(--color_unselected); } /*My question is about this part*/ .selector .menu-a:hover, .selector .menu-a:hover~.menu-a { background: var(--color_hover); } .selector .menu-b:hover, .selector .menu-b:hover~.menu-b { background: var(--color_hover); } /* The trick start here */ .selector a { position:relative; } .selector a::before { content:""; position:absolute; z-index:9; top:0; left:0; bottom:0; width:100vw; height: 100vw; } /* Remove the pseudo element on the next elements*/ .selector .menu-a ~ .menu-a a::before, .selector .menu-b ~ .menu-b a::before{ content:none; } /**/

 <table id="selector" class="selector"> <colgroup> <col span="1" class="date-text menu-day"> <col span="3" class="menu-a"> <col span="3" class="menu-b"> <col span="1" class="menu-n"> </colgroup> <tr> <th><a id="currMthText">2020-1</a></th> <th colspan="3"><a>Menu A</a></th> <th colspan="3"><a>Menu B</a></th> <th><a>Not eating</a></th> </tr> <!--Generated meals come here--> <tr id="line-1" class="line-1"> <td class="unselected"><a id="day-1">1</a></td> <td id="1-a-soup" class="menu-a unselected"><a>SoupA1</a></td> <td id="1-a-main" class="menu-a unselected"><a>MainA1</a></td> <td id="1-a-garnish" class="menu-a unselected"><a>GarnishA1</a></td> <td id="1-b-soup" class="menu-b unselected"><a>SoupB1</a></td> <td id="1-b-main" class="menu-b unselected"><a>MainB1</a></td> <td id="1-b-garnish" class="menu-b unselected"><a>GarnishB1</a></td> <td id="1-n" class="unselected menu-n"> <a>Not eating</a> </td> </tr> <tr id="line-2" class="line-2"> <td><a id="day-2">2</a></td> <td id="2-a-soup" class="unselected menu-a"><a>SoupA2</a></td> <td id="2-a-main" class="unselected menu-a"><a>MainA2</a></td> <td id="2-a-garnish" class="unselected menu-a"><a>GarnishA2</a></td> <td id="2-b-soup" class="unselected menu-b"><a>SoupB2</a></td> <td id="2-b-main" class="unselected menu-b"><a>MainB2</a></td> <td id="2-b-garnish" class="unselected menu-b"><a>GarnishB2</a></td> <td id="2-n" class="unselected menu-n"> <a>Not eating</a> </td> </tr> </table>