如何在我的下拉選擇中添加 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;
    }

這個片段應該可以工作。