css - 如何向嵌套的 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 结构，那么您就有了 .Rtooltip 在 button 之前这个技巧会奏效:

<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 类的元素> 这是悬停的 .table-menu 的下一个兄弟(在 html 之后)。

希望对您有所帮助!