如何在我的下拉选择中添加悬停？

Question

我尝试将 &:hover 插入到我的代码中，但没有任何效果。这是我的代码。如何使用此代码添加悬停效果？我想我的 scss 代码有问题，但我想不通。

$(".dropdown").click(function(){
  $(this).toggleClass('is-active');
});

.arrow-toggle {
  &:before, &:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0;
    right: 5px;
  }
  &:before {
    position: absolute;
    z-index: 1;
    // 50% - half of arrow size - arrow thickness
    top: calc(50% - 7px);
    border-color: blue transparent transparent;
  }
  &:after {
    border-color: yellow transparent transparent;
    position: absolute;
    top: calc(50% - 5px);
  }
}

.dropdown {
  width: 200px;
   height: 50px;
  background: blue;
  position: relative;
  @extend .arrow-toggle;
  
  &.is-active {
    transform: scaleY(-1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown"></div>

Answer 1

尝试使用 :hover 伪 class。您也可以查看 this link

Answer 2

在 vscode 中安装 scss 编译器，首先将 scss 编译为正常的 css，将 css 文件添加到 html.

&:hover {
        color:yellow;
    }

此代码段应该有效。

如何在我的下拉选择中添加悬停？

How can I add hover in my dropdown selection?

html

javascript

css

sass

hover