IE11中与Angular Material相关的悬停问题

Question

我正在使用 AngularJS、Angular Material 和 CSS 将鼠标悬停在卡片的顶部时，在卡片上显示某些详细信息。

这是创建的代码笔-https://codepen.io/SSPai/pen/oyVmZg

<md-button  md-no-ink  class="member-card" ng-click="">
            <div layout="column" layout-align="center center">
                <!-- The details should be shown upon hovering over "top-card-container" only -->
                 <div class="top-card-container">
                        <div class="member-photo-background mem-image"><md-icon class="member-photo">account_circle</md-icon></div>
                            <div class="member-details-part">
                                                    <div  layout="column" layout-align="space-around stretch">
                                                            <div layout="row" layout-align="space-around center" class="member-details member-details-start">
                                                                <md-icon class="member-detail-info member-detail-icon">location_on</md-icon>
                              <div flex
                                   class="member-card-data member-detail-info  member-details-value member-title">
                                <div 
                                     ng-bind="memberLocation"></div>
                                <md-tooltip md-direction="right"
                                            ng-if="memberLocation">
                                  {{memberLocation}}
                                </md-tooltip>
                              </div>
                          </div>
                      </div>
                    </div>
                </div>
           <div class="member-name-bar" layout="row" layout-align="center center">
                  <div class=" member-card-data member-name">
                    <div 
                         ng-bind="memberDisplayName">
                    </div>
                    <!-- Even this display of tooltip in IE is not working-->
                    <md-tooltip>{{memberDisplayName}}</md-tooltip>
                  </div>

                </div>
        </div>
      </md-button>

问题是上面的 codepen 在 Chrome 中完美运行，但在 IE11 中无法正常运行。 在 IE11 中，悬停时会应用按钮的默认悬停属性，这是不可取的。

在 IE11 中：悬停时的详细信息不显示，悬停在卡片底部的名称上时的工具提示不显示。

请帮助使上述代码笔兼容IE11。

Answer 1

我认为.md-button 的 CSS 规则会干扰您的悬停效果自定义规则。我建议对容器使用<div> 标签而不是<md-button>。