Как я могу добавить событие hover в мой вложенный 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;
        }
    }

}

Выпадающее меню вызывается событием onclick на родительском элементе div.При наведении курсора на .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;
    }
  }
}

Подробнее о соседний братский комбинатор .

Вы можетевыберите следующего брата, используя css, но не предыдущего.Так что в случае, который вы использовали, .table-menu:hover .Rtooltip;таким образом, вы пытались выбрать элемент с классом .Rtooltip внутри навеса .table-menu.Используя соседний селектор родного брата (и изменяя порядок родного брата, чтобы всплывающая подсказка появлялась после кнопки) .table-menu:hover + .Rtooltip выберет элемент с классом .Rtooltip, который является следующим родным братом (идет после html) навеса .table-menu.

Надеюсь, это поможет!