html - 使用 :hover, :focus 更改悬停类之外的另一个 css

Question

我有 css 类，它们都是同级的:flex-align 和 nav-dropdown 当我将鼠标悬停在 flex-align 上时，它工作正常，nav-dropdown 发生变化。

.flex-align:hover ~ .nav-dropdown {
   display: block !important;
}

问题: 我想要的是，只有当我悬停或聚焦作为flex-align子项的icon时，它才会改变，这是 nav-dropdown 唯一一次发生变化

谢谢

.flex-align {
    display: flex;
    justify-content: start;
    align-items: center;
}

.nav-dropdown {
    display: none;
    width: auto;
}
.flex-align i:hover ~ .nav-dropdown {
    display: block;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="flex-align">
    <i class="fa fa-arrow-right dropdown-icon">&nbsp;</i>
    <p>Main test</p>
</div>
<ul class="nav-dropdown">
    <li><a href="#">test 1</a></li>
    <li><a href="#">test 2</a></li>
    <li><a href="#">test 3</a></li>
</ul>

Answer 1

您可以使用pointer-events CSS 属性可确保图标将悬停事件发送到其父级，但文本不会:

.flex-align {
  display: flex;
  justify-content: start;
  pointer-events: none;
}
.flex-align i {
  pointer-events: auto;
}
.nav-dropdown {
  display: none;
}
.flex-align:hover ~ .nav-dropdown {
  display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="flex-align">
  <i class="fa fa-arrow-right dropdown-icon">&nbsp;</i>
  <span>Main test</span>
</div>
<ul class="nav-dropdown">
  <li><a href="#">test 1</a></li>
  <li><a href="#">test 2</a></li>
  <li><a href="#">test 3</a></li>
</ul>