SCSS 到 CSS 构建使悬停效果不起作用？ VUE 应用程序

如何解决SCSS 到 CSS 构建使悬停效果不起作用？ VUE 应用程序

所以我构建了这个 Vue 应用程序，它显示了一个数据列表，每个列表有 3 个按钮。这些按钮略微褪色，不透明度设置为 0.5。悬停在它们上时，不透明度变为 1。

不知何故，当我构建应用程序时，此特定悬停效果默认为 1%，这使它们几乎不可见。我无法真正理解导致这种视觉缺陷的原因，因为在为 Vue 应用程序使用实时重新加载时一切正常。它在构建但在本地运行时也能完美运行。

在云上托管应用程序时便开始出现缺陷。应用程序中的其他所有内容都按其应有的方式显示和运行。但是这种悬停效果根本行不通。

这是它的外观和实际应该看起来：

SCSS 代码如下所示：

.insider-trade-card {
        position: relative;
        width: auto;
        height: 30px;
        padding: 10px 15px;
        margin: 25px 0px 0px 0px;
        display: flex;
        flex-direction: row;
        border-radius: 25px;
        background-color: $color-beige;
        .insider-trade-data {
            display: flex;
            flex-direction: column;
            align-content: flex-start;
            justify-content: center;
            color: black;
            font-size: 12px;
            font-weight: 700;
            padding: 0px 10px;
            word-break: break-word;

            // here is the class for the buttons
            .delete-insider-trade {
                width: 20px;
                opacity: 0.5;
                transition: opacity 300ms;
            }
            // hover class
            .delete-insider-trade:hover {
                opacity: 1;
            }
        }
        .type-badge {
            width: auto;
            text-align: center;
            font-size: 10px;
            color: white;
            font-weight: 700;
            position: absolute;
            padding: 2px 14px;
            border-radius: 25px;
            top: -7px;
            left: 40px;
        }
    }

以下是 <template> 的特定部分在 vue 中的外观

<div class="insider-trade-data" style="width:auto; padding-right: 0px;">
            <div class="delete-insider-trade">
                <img
                    src="url-to-button.svg"
                    alt="visibility button"
                    class="delete-insider-trade"
                    @click="changeVisibility()"
                />
            </div>
        </div>
        <div class="insider-trade-data" style="width:auto; padding-right: 0px;">
            <div class="delete-insider-trade">
                <a :href="a-link.com" target="_blank">
                    <img
                        src="url-to-button.svg"
                        alt="link button"
                        class="delete-insider-trade"
                    />
                </a>
            </div>
        </div>
        <div class="insider-trade-data" style="width:auto; padding-right: 0px;">
            <div class="delete-insider-trade">
                <img
                    src="url-to-button.svg"
                    alt="delete button"
                    class="delete-insider-trade"
                    @click="deleteInsiderTrade()"
                />
            </div>
        </div>

这是镀铬检查的屏幕，它明显回落到 1% 的不透明度。 :hover 的不透明度也回落到 1%：