vue.js 模式 css

Question

我在另一个组件中使用并配置了这个 BaseComponent，如下所示：

<BaseTitle
      v-slot="{ highlightClass }"
      :color="mode === 'faq' ? 'dark' : 'secondary'"
      v-bind="__titleProps"
      :text-uppercase="mode === 'incentive'"
      highlight-type="colorize-uppercase-bold"
      :class="{ 'font-weight-normal': mode === 'faq' }"
    >

在这个元素上我有一个 css-hover class


    .InfoTile {
      &:hover {
        .answer {
          background-color: $transparent-primary;
          opacity: 1;
        }
    
        .question {
          opacity: 0;
        }
      }

当我使用“激励”模式时，我需要使用另一种悬停背景色。有没有办法根据我使用的模式使用另一个悬停？

Answer 1

所以，完全有可能。

你只需要在正常模式和激励模式之间创建 2 个差异 css 类，这将有 2 个差异悬停等

如果模式 === incentive，你将创建一个条件项检查。

但是，您需要做的第一件事是在您的组件中设置多个类，您已经在使用一个了。

所以，就这样吧。

:class="[{ 'font-weight-normal': mode === 'faq' }, mode === incentive ? 'cssClass1': 'cssClass2']"

vue.js 模式 css

vue.js mode for css

javascript

css

vuejs2

vuejs3