在项目悬停时保持 DropDown Caret 动画

Question

我有一个 BS4 下拉元素，我正在为切换右侧的小插入符设置动画。到目前为止，这很有效，但前提是鼠标悬停在下拉项目上。当我将鼠标悬停在子菜单项上时，插入符号会旋转回来。在鼠标离开下拉菜单和下拉菜单之前，不会发生这种情况。

html {
  font-family: Arial;
  font-size: 1.4rem;
  line-height: 1.4rem;
}
.dropdown {
  display: inline-block;
  padding: 0 7px;
}
  .dropdown.show {
    background-color: rgba(255, 255, 255, 0.9);
  }

 .dropdown a::before {
   content: "";
 }

 .dropdown a.dropdown-toggle {
      cursor: pointer;
      padding: 3px 7px;
}

.dropdown a.dropdown-toggle::after {
  font-size: 1.4rem;
  content: ">";
  color: Orange;
  line-height: 1.4rem;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  vertical-align: middle;
  transition: 0.5s;
}

.dropdown a.dropdown-toggle:hover::after {
  transform: rotate(90deg);
}
    
.dropdown .dropdown-menu {
  min-width: initial;
  padding: 0.5rem;
  margin: 0;
  margin-left: 7px;
  font-size: initial;
  border-radius: 0;
  transition: all 0.5s;
  overflow: hidden;
  transform-origin: top center;
  transform: scale(1,0);
  display: block;
  border: none;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
a.dropdown-item {
  font-size: 1.6rem;
  line-height: 2.9rem;
  text-decoration: none;
}
a.dropdown-item:hover {
  color: Orange;
}

.dropdown:hover .dropdown-toggle {
    background-color: rgba(255, 255, 255, 0.9);
}

.dropdown:hover .dropdown-menu {
  transform: scale(1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown">
    MAIN
  </a>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Sub1</a><br/>
    <a class="dropdown-item" href="#">Sub2</a><br/>
    <a class="dropdown-item" href="#">Sub3</a>
  </div>
</div>

由于包含 sn-p 的动画旋转由于未知原因无法正常工作，我还准备了一个 Codepen。在这里你可以看到旋转： https://codepen.io/SchweizerSchoggi/pen/GRoZYqV

只要鼠标位置在下拉菜单或下拉菜单上，我希望保持旋转的插入符号。

Answer 1

由于使用 css 您无法返回到“先前的兄弟”（更不用说父）元素，因此您可以将下拉切换元素放置在菜单之后，如下所示：

<div class="dropdown">
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Sub1</a>
    <a class="dropdown-item" href="#">Sub2</a>
    <a class="dropdown-item" href="#">Sub3</a>
  </div>

  <a class="dropdown-toggle" data-toggle="dropdown">MAIN</a>
</div>

这样在菜单悬停时，可以像这样到达下拉切换元素：

.dropdown-menu:hover + a:after{
   transform: rotate(90deg);
}

这里是the working fiddle.