如何向我的嵌套 div 添加悬停事件？

Question

取下面的HTML结构和CSS

<div class="dropdown" onclick="addHover(this)">
    <div class="Rtooltip">More Options</div>
    <button class="table-menu dropdown-toggle" type="button" data-toggle="dropdown"> 
        <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>

.dropdown {
    &:hover {
        .Rtooltip {
            display: block;
        }
    }

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

// this doesn't work
.table-menu {
    &:hover {
        .Rtooltip {
            display: block;
        }
    }

}

下拉菜单由父 div 上的 onclick 事件触发。当您将鼠标悬停在 .dropdown 上时，会出现工具提示。当下拉菜单打开时，我使用下拉菜单上的 .open 类隐藏此工具提示。但是，当您单击下拉列表中的某个项目时，.open 类将被删除，并且会在瞬间再次出现工具提示，因为:hover 事件位于下拉列表中。

我想将:hover 事件放在button.table-menu 上，这样它只会在用户将鼠标悬停在按钮上时显示，但是当我移动我的css 以在悬停在该按钮上触发时没有任何反应。看来 button.table-menu 没有传播到顶部。我需要编写什么 SASS 以确保仅当用户将鼠标悬停在 button.table-menu 上时才显示工具提示？

Answer 1

在css 中，您可以选择下一个兄弟姐妹，但不能选择前一个兄弟姐妹，因此，如果您可以更改html 结构，以便在button 之前有.Rtooltip，此技巧将起作用：

<div class="dropdown" onclick="addHover(this)">
    <button class="table-menu dropdown-toggle" type="button" data-toggle="dropdown"> 
        <span class="glyphicon glyphicon-option-horizontal"></span>
    </button>
    <div class="Rtooltip">More Options</div>
    <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>

因此您可以使用+ 选择器选择相邻的兄弟组合器：

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

关于adjacent sibling combinator的更多信息。

您可以使用css 选择下一个兄弟姐妹，但不能选择前一个兄弟姐妹。所以在你使用的情况下，.table-menu:hover .Rtooltip;这样你就试图在悬停的.table-menu 中选择一个类.Rtooltip 的元素。使用相邻的同级选择器（并更改同级顺序以便工具提示出现在按钮之后）.table-menu:hover + .Rtooltip 将选择一个类为 .Rtooltip 的元素，它是悬停的 @ 的下一个同级（在 html 之后） 987654336@.

希望对你有帮助！