Angular Material IE11 中的相关悬停问题

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

Angular Material IE11 中的相关悬停问题

Angular Material related Hover issue in IE11

css

angularjs

internet-explorer-11

angular-material