CSS hover修改其他类样式失效：表格行hover无法显示tooltip

核心问题 #

你的CSS选择器逻辑错误：#aoi-table tbody tr:hover ~ .tooltip-box 里的~是同级后续元素选择器，但<tr>是<table>的子元素，.tooltip-box是<table>的同级元素，两者不属于同一层级，所以这个选择器无法匹配到tooltip元素。

解决方案一：将Tooltip嵌入表格行内（纯CSS实现） #

把.tooltip-box放到每个<tr>内部，通过子元素选择器控制显示：

修改后的HTML #

<table id='aoi-table'>
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th colSpan={2}>Critical PS</th>
    </tr>
  </thead>
  <tbody>
    {cityData.map((item) => {
      return (
        <tr onClick={() => dispatch(addArea(item))}>
          <td>{item.name}</td>
          <td>
            <div className='status'>
              {(() => {
                if (item.status === "Safe") {
                  return <Dot color='#24A148' className='status-dot' />;
                }
                if (item.status === "Observe") {
                  return <Dot color='#F1C21B' className='status-dot' />;
                }
                if (item.status === "Critical") {
                  return <Dot color='#DA1E28' className='status-dot' />;
                }
              })()}
              <div className='status-line'>{item.status}</div>
            </div>
          </td>
          <td>
            <div className='aoi-critical-value-wrapper'>
              {item.critical}
            </div>
          </td>
          <td>
            {(() => {
              if (item.criticalValue > 0) {
                return (
                  <div className='aoi-critical-value-positive'>
                    <UpArrowAlt className='icon-arrow' />
                    {item.criticalValue.toString()}
                  </div>
                );
              } else if (item.criticalValue < 0) {
                return (
                  <div className='aoi-critical-value-negative'>
                    <DownArrowAlt className='icon-arrow' />
                    {item.criticalValue.toString().substring(1)}
                  </div>
                );
              } else {
                return (
                  <div className='aoi-critical-value-neutral'>
                    {"-"}
                    {item.criticalValue}
                  </div>
                );
              }
            })()}
          </td>
          <!-- 嵌入Tooltip到当前行 -->
          <td className='tooltip-container'>
            <div className='tooltip-box'>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus,
                sit eligendi quae rem, exercitationem at aut modi ut fugiat, odio
                alias quaerat! Sed similique ut libero quos temporibus. Eaque, illum?
              </p>
              <p style={{ color: "#4589FF" }}>Learn more....</p>
            </div>
          </td>
        </tr>
      );
    })}
  </tbody>
</table>

修改后的CSS #

#aoi-table {
  border-spacing: 0px;
  width: 100%;
  position: relative; /* 让Tooltip相对表格定位 */
}

#aoi-table th {
  padding: 1rem;
  background-color: #21272a;
  color: #ffffff;
  border: none;
  font-weight: 300;
  font-size: 18px;
}

#aoi-table td {
  padding: 1rem;
  cursor: pointer;
}

#aoi-table tbody tr:hover {
  background-color: #343a3f;
}

#aoi-table tbody tr:hover td:nth-child(1) {
  border-left: 5px solid #0f62fe;
}

/* 隐藏Tooltip容器默认样式 */
.tooltip-container {
  padding: 0;
  border: none;
}

.tooltip-box {
  visibility: hidden;
  position: absolute;
  top: calc(100% + 10px);
  left: 230px;
  color: #fff;
  background-color: #4d5358;
  width: 230px;
  padding: 8px 8px;
  text-align: justify;
  z-index: 100; /* 确保Tooltip在最上层 */
}

/* 通过行hover控制子元素Tooltip */
#aoi-table tbody tr:hover .tooltip-box {
  visibility: visible;
}

解决方案二：JavaScript监听hover事件（适合全局复用Tooltip场景） #

保持原HTML结构，用JS监听行的hover事件控制Tooltip显示：

添加JavaScript代码 #

const tableRows = document.querySelectorAll('#aoi-table tbody tr');
const tooltipBox = document.querySelector('.tooltip-box');

tableRows.forEach(row => {
  row.addEventListener('mouseenter', () => {
    tooltipBox.style.visibility = 'visible';
    // 可选：调整Tooltip位置到行附近
    const rect = row.getBoundingClientRect();
    tooltipBox.style.top = `${rect.bottom + 10}px`;
    tooltipBox.style.left = `${rect.left + 230}px`;
  });

  row.addEventListener('mouseleave', () => {
    tooltipBox.style.visibility = 'hidden';
  });
});

保留原CSS（仅确保基础样式正确） #

/* 其他表格样式不变 */
.tooltip-box {
  visibility: hidden;
  position: absolute;
  color: #fff;
  background-color: #4d5358;
  width: 230px;
  padding: 8px 8px;
  text-align: justify;
  z-index: 100;
}

内容的提问来源于stack exchange，提问作者tanjim anim