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>

问题是上述代码笔在Chrome中完美运行，但在IE11中却无法正常运行。在IE11中，悬停时会应用按钮的默认悬停属性，这是不希望的。

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

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

Answer 1

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

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

1 个答案: