单击时具有按钮背景，但不会悬停vuejs

Question

说明

我在按钮上有一个图标，单击该图标可打开菜单。如果我想在按钮下正确获取菜单，则需要更改高度，因为似乎没有其他选择（页边距无效）。但是然后我得到了背景悬停效果，而没有将悬停在按钮上。

如此理解。单击按钮，不再将鼠标悬停在按钮上，您将获得效果。

形状是因为我改变了高度和宽度。背景色：透明！important;无效

这是组件文件

<template>
  <v-menu
          :close-on-click="true"
          offset-y
          transition="slide-y-transition"
          v-model="language_menu_open"
          return-value="language_menu_open = false">
    <template v-slot:activator="{ on }">
      <v-btn
              v-on="on"
              v-ripple="false"
              icon
              depressed
              class="language-button">
          <v-icon>{{functionMenu(language_menu_open)}}</v-icon>
          <v-icon style="margin-right: 10px !important;">mdi-web</v-icon>
      </v-btn>
    </template>
    <v-list class="language-dropdown">
      <v-list-item
                  v-for="language in languages"
                  :key="language.title"
                  v-ripple="false"
                  @click="language">
        <v-list-item-title>{{language.title}}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-menu>
</template>

<script>
  export default {
    name: "Languages",
    data() {
      return {
        language_menu_open: false,
        languages: [
          {title: "Nederlands"},
          {title: "English"},
          {title: "Deutsch"}
        ],
        functionMenu: function chevronChanger(menu_state) {
          if (menu_state) {
            return "mdi-chevron-up"
          } else {
            return "mdi-chevron-down"
          }
        }
      }
    }
  }
</script>

<style scoped>
  .language-button {
    height: 45px !important;
    width: 25px !important;
    background-color: transparent !important;
  }

  .language-button:hover {
    background-color: transparent !important;
  }

  .language-button:hover:before {
    background-color: transparent !important;
    display: none !important;
  }

  .language-dropdown {
    padding: 0 !important;
  }

  .language-dropdown:hover:before {
    background-color: transparent !important;
    display: none;
  }
</style>

任何帮助将不胜感激。

Answer 1

尝试此：

.language-button:active {
    background-color: transparent !important;
}