css - CSS 在一行中高亮 col 的所有元素

Question

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

请查看下表，以更好地理解我所指的内容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>

标签： csshtml-tablehovercol

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>