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

Question

我有两个同级的 css 类:flex-align和 nav-dropdown当我悬停 flex-align 时它工作正常, nav-dropdown变化。

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

问题:
我想要的是它只有在我 hover 时才会改变或 focus icon这是 flex-align 的 child ，那是唯一一次 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

由于您无法在 CSS 中选择父元素(等待可能的 CSSv4 解决方案)，因此请使用 JS。在悬停时将类添加到父元素

$(document).ready(function () {
  $('.flex-align i').hover(
    function () {
      $(this).closest('.parent-wrapper').addClass('hover');
    },
    function () {
      $(this).closest('.parent-wrapper').removeClass('hover');
    }
  )
});

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

.nav-dropdown {
    display: none !important;
    width: auto !important;
}
.hover .nav-dropdown {
    display: block !important;
}

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


<div class="parent-wrapper">
  <div class="flex-align">
      <i class="fa fa-arrow-right dropdown-icon"></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>
</div>