md-selectとmd-optionを使用して、言語選択ツールのドロップダウンを生成しています。そのため、対応する国旗を表示するために、言語文字列を表示するだけでなく、flag-icon-cssを使用しています。md-option要素は、ホバーの外観と動作を変更します。
このシナリオでは、私はmd-select要素の入った箱から出てくると思うストラッジの振る舞いを経験しています。すなわち、md-selectの要素は、すでに選択されているものと、マウスでマウスを移動したものを除いて、正しくレンダリングされます。
我々は必要な情報を保持している背景にはtypescriptですクラスを使用していて、HTMLは次のようになります。我々はまた、対応するフラグがあるsassファイルにパックされているCSSクラスを使用している
<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>
セット。 Notice：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とフランス語（フランセ）の上にホバリングしていますこの図で
は、現在選択されている要素です。
私は、私たちのお尻のコードを交錯させる方法を知らなかったので、私はフィドルでセットアップ全体を再現することができませんでした。
このため、私のフィドルのフラグはハードコードされたタグであり、ホバーでは消えず、を選択します。しかし、あなたがフィドルで見ることができるのは、md-selectのデフォルトの振る舞いが、デフォルトでホバリングされたアイテムの背景を変更することです。私はこれが私たちの旗を消滅させる非常に同じ機能だと信じています。 Please try the fiddle for yourself.
私は間違いを犯している可能性があり、私のCSSコードがその原因です。しかし、私はホバリングコードを実装していません。間違っていると私に知らせてください。
したがって、フラグは常にmd-optionに表示されるようにこの動作を抑制するにはどうすればよいですか。
UPDATE：私はbackground-position: centerを設定した後
私が今、コンテナの範囲の外から中にどのようにフラグのスライドを見ることができるように、このすべての背後にあるアニメーションのいくつかの種類があることが、より明確に思えます。
私はこれが動作しないと信じよろしく