我正在使用 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。
最佳答案
我认为 .md-button 的 CSS 规则正在干扰您的悬停效果自定义规则。我建议使用 <div>容器标签而不是 <md-button> .
关于css - IE11 中与 Angular Material 相关的悬停问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51150832/