时间戳

首页 > 解决方案 > 如何向我的嵌套 div 添加悬停事件？

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

问题描述

取下面的 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？

标签： csssasshover

解决方案

在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;
    }
  }
}

有关相邻兄弟组合器的更多信息。

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

希望能帮助到你！

推荐阅读