Question

我正在使用md-select和md-option来生成语言选择器下拉列表。因此，我们不仅要显示语言字符串，还要使用flag-icon-css来显示相应的国家/地区标志。

在这种情况下，我遇到了一个暴力行为，我认为它是md-select元素开箱即用的。即正确呈现md-select元素除了已经选择的元素和用鼠标悬停的元素。

我们在后台使用了一个包含所需信息的typescript类，而html看起来像这样：

  <md-select ng-model="login.selectedLanguage" class="lang-select {{login.selectedLanguage}}">
    <md-option ng-repeat="lang in login.languages" value="{{lang.langKey}}" ng-click="login.changeLang(lang.langKey)" class="lang-option">
      {{lang.text}}
    </md-option>
  </md-select>

我们还使用css类，这些类打包在sass文件中，其中设置了相应的标志。 注意：这里我省略了md-select本身的css类，因为它按预期工作。

@mixin flag($country)
  background-image: url('#{$ROOT}/bower_components/flag-icon-css/flags/4x3/#{$country}.svg')

.lang-select
  margin-top: 22px

.lang-option
  padding-left: 50px
  background: no-repeat 10px center
  background-size: 30px 20px
  text-transform: none

.lang-option[value="de_DE"]
  +flag('de')

.lang-option[value="en_EN"]
  +flag('gb')

.lang-option[value="fr_FR"]
  +flag('fr')

就像我之前说的那样，每当我悬停一个元素时，旗帜就会消失，看起来它已经移出了下拉列表的范围，因为我确信我可以注意到旗帜轻微移动到左上角当我徘徊。结果如下：

在图中，我目前在english上空盘旋，法语（Francais）是当前选中的元素。

由于我不知道如何处理我们的sass代码，因此我无法在小提琴中重现整个设置。

因此，我的小提琴中的标志是硬编码标签，在悬停时不会消失或选择。但是你可以在小提琴中看到的是md-select的默认行为会在默认情况下改变悬停项目的背景。我相信这是使我们的旗帜消失的功能。 Please try the fiddle for yourself.

当然可能我错了，我的css代码对行为负责。但是我没有实现任何悬停代码。如果我弄错了，请告诉我。

所以问题是如何抑制此行为以便始终在md-option中显示标记？

更新

在我设置background-position: center之后，似乎更清楚的是，所有这些背后都有某种动画，因为我现在可以看到标志是如何从容器范围内滑入的。

此致

Answer 1

我认为这不起作用，因为您通过CSS设置background-image属性并在悬停/选择Angular Material时更改元素的背景。

你可能做的实际上与你在小提琴中所做的一样。不是在md-option元素上设置背景图像，而是可以在里面添加一个span并将其应用于那里：

<md-option ng-repeat="lang in login.languages" value="{{lang.langKey}}" ng-click="login.changeLang(lang.langKey)" class="lang-option">
  <span class="flag-container"></span> {{lang.text}}
</md-option>

不熟悉SASS语法，所以我用普通的CSS写这个。你知道我的意思:)。

.lang-option[value="de_DE"] .flag-container {
    background-image: url('PATH-TO-DE-FLAG.svg')
}

希望这能解决您的问题：）

md-option元素在悬停时更改外观和行为并选择

1 个答案: