Угловой материал, связанный с Hover в IE11 - PullRequest
0 голосов
/ 03 июля 2018

Я работаю над отображением определенных деталей на карте при наведении на верхнюю часть карты, используя 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.

1 Ответ

0 голосов
/ 03 июля 2018

Я думаю, что CSS-правила для .md-button мешают вашим пользовательским правилам для эффекта наведения. Я бы предложил использовать тег <div> для контейнера вместо <md-button>.

...