Как скрыть: перед содержимым в родительском элементе при наведении на дочерний элемент?

Question

У меня есть это в html:

<li *ngFor="let menu of menus" class="{{ menu.attributes.class }} menu-items" [attr.data-title]="menu.label">
    <a [routerLink]="[menu.url||'/']" [queryParams]="menu.refParameter3 ? menu.refParameter3:{}"(click)="clicked = true;selectMenu(menu)">
        <i *ngIf="menu.icon" class="{{menu.icon}}"></i>
        <span>{{menu.label}}</span>
        <i *ngIf="menu.children && menu.children.length" class="subarrow fa fa-angle-right"></i>
    </a>

    <z-menu class="childrens" *ngIf="menu.children && menu.children.length" [menus]="menu.children" [parent]="menu.label"></z-menu>
</li>

В CSS у меня есть это:

.menu-items:hover::before {
  content: attr(data-title);
  position: absolute;
  bottom: -80px;
  display: inline-block;
  padding: 0px 6px;
  border-radius: 2px;
  background: #fff;
  color: gray;
  font-size: 11px;
  font-family: sans-serif;
  white-space: nowrap;
  z-index: 999;
  height: 30px;
  min-width: 100px;
  left: 17px;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  border: 1px solid gray;
  visibility: 1s
}

Так что я хочу, когда я нахожусь на li с классом childrens какparent, чтобы скрыть перед содержимым родительского элемента.Любое предложение?

Answer 1

Я не совсем понимаю, чего вы хотите достичь!

Хотите ли вы показать селектор :before по умолчанию, а затем скрыть его, когда наведите курсор на элемент li, который имеет childrens класс?Это то, что вы хотите ??

И, пожалуйста, сделайте, как предложил @CBroe.