Question

当我将鼠标悬停在文本字段时，我想在我的代码笔https://codepen.io/handy29/pen/yLLwjGg中使用1.5.x版本的文本字段。我要使用绿色＃6fbd44。到目前为止，我的代码（css）：

.theme--light.v-text-field--outline > .v-input__control > .v-input__slot {
    border-width: 1px;
  }

  .theme--light.v-text-field--outline > .v-input__control > .v-input__slot:hover {
    border-style: solid;
    border-color: #6fbd44;
  }

html：

<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-layout row wrap>

          <v-flex xs12 sm6 md3>
            <v-hover>
              <v-text-field
                outline
                single-line
            ></v-text-field>
            </v-hover>
          </v-flex>


        </v-layout>
      </v-container>
    </v-form>
  </v-app>
</div>

我正在使用：hover，但仍无法正常工作，它保持黑色边框颜色。我该怎么办？谢谢

Answer 1

在vuetify中，文本框的悬停状态已被以下选择器覆盖，该选择器是文本框的更具体选择器。这样它阻止了您的CSS规则。

.theme--light.v-text-field--outline:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot:hover

为了绕过vuetify样式的文本字段悬停，您可以在css文件中使用相同的选择器。

.theme--light.v-text-field--outline:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot:hover{
border-width: 1px;
border-style: solid;
border-color: #6fbd44;

}

悬停文本框时更改边框颜色

1 个答案: