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

Question

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

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

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

有没有办法在 CSS 中执行此操作，或者我应该使用 JavaScript 在悬停时对它们应用类？

这是我尝试做的事情：

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

这是我的 table:

: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>

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

CSS highlight all elements of col in a single row

css

html-table

col

hover