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

Posted 2023-03-06

【中文标题】md-option 元素在悬停和选择时更改外观和行为

【英文标题】：md-option elements change appearance and behaviour on hover and select

【发布时间】：2017-08-04 11:00:48

【问题描述】：

我正在使用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> 

我们还使用封装在sass 文件中的css 类，其中设置了相应的标志。 注意：这里我省略了 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 之后，似乎更清楚的是所有这一切背后都有某种动画，因为我现在可以看到标志是如何从容器范围之外滑入的。

问候

---

【参考方案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')

希望这能解决你的问题:)