如何实现仅hover嵌套div内的.table-menu按钮时显示tooltip？

嘿，我来帮你搞定这个tooltip的问题！

先说说为什么你写的.table-menu:hover .Rtooltip无效：因为.Rtooltip是.table-menu的前序兄弟元素，CSS只能选择当前元素的子元素或者后续兄弟元素，没法直接通过.table-menu的hover状态选中它前面的.Rtooltip。

接下来给你两个解决方案，一个是不修改HTML的纯CSS/SASS写法，另一个是调整HTML结构的更直观写法，你可以根据需求选择：

方案1：不修改HTML的纯CSS/SASS写法 #

这个方法通过控制父元素的hover触发条件，确保只有hover按钮时才显示tooltip，同时解决点击菜单项后的闪现问题：

// 先给tooltip默认设置隐藏
.Rtooltip {
  display: none;
}

.dropdown {
  // 让tooltip和下拉菜单不触发父元素的hover事件
  // 这样只有hover按钮时才会激活父元素的hover状态
  .Rtooltip, .dropdown-menu {
    pointer-events: none;
  }

  // 当hover父元素（实际只有hover按钮时才会触发），显示tooltip
  &:hover .Rtooltip {
    display: block;
  }

  // 下拉菜单打开时隐藏tooltip
  &.open .Rtooltip,
  // 父元素内部有元素获得焦点时（比如点击菜单项后）也隐藏tooltip，解决闪现问题
  &:focus-within .Rtooltip {
    display: none;
  }
}

方案2：调整HTML结构（更直观） #

如果允许微调HTML，把.Rtooltip放到.table-menu里面，这样你的原始思路就能直接生效，代码更易懂：

修改后的HTML片段：

<div class="dropdown" onclick="addHover(this)">
  <button class="table-menu dropdown-toggle" type="button" data-toggle="dropdown">
    <div class="Rtooltip">More Options</div>
    <span class="glyphicon glyphicon-option-horizontal"></span>
  </button>
  <!-- 下拉菜单部分保持不变 -->
  <ul class="dropdown-menu">
    <li class="dropdown-submenu">
      <a class="test" tabindex="-1" href="#">Add Project Personnel <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">Jared Kushner</a></li>
        <li><a tabindex="-1" href="#">Samuel Harris</a></li>
        <li class="dropdown-submenu"><a href="#">William Dafoe</a></li>
      </ul>
    </li>
    <li><a tabindex="-1" href="#">Add All Personnel</a></li>
    <li><a tabindex="-1" href="#">Add New Person</a></li>
  </ul>
</div>

对应的SASS代码：

.Rtooltip {
  display: none;
}

.table-menu {
  &:hover .Rtooltip {
    display: block;
  }
}

.dropdown.open .Rtooltip {
  display: none;
}

这样就完美实现了你要的效果：只有hover按钮时显示tooltip，下拉菜单打开时隐藏，点击菜单项后也不会出现tooltip闪现的问题~

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