css - 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> .