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

Question

我尝试将&:hover插入到我的代码中，但没有任何效果。 这是我的代码。 如何使用此代码添加 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。 您也可以查看此链接

Answer 2

在vscode中安装scss编译器，首先将scss编译成普通的css文件到你的html。

&:hover {
        color:yellow;
    }

这个片段应该可以工作。