如何在 md-card 悬停时添加 md-ink-ripple 效果

Question

我需要在 md-card 上悬停时添加悬停效果。此效果在 md-list-item（悬停项目）上效果很好。我需要对 md-card 有类似的效果。我怎样才能做到这一点？

Answer 1

在下面添加 class 目前有帮助。只是想知道是否有比这更好的解决方案。

.ripplelink:hover{
    z-index:1000;
  box-shadow:rgba(0, 0, 0, 0.3) 0 16px 16px 0;
  -webkit-box-shadow:rgba(0, 0, 0, 0.3) 0 16px 16px 0;
  -moz-box-shadow:rgba(0, 0, 0, 0.3) 0 16px 16px 0;
}

Answer 2

这是使用 md-list-item 为 md-card - CodePen

提供墨水波纹和悬停效果的解决方案

诀窍是使用 md-list-item 作为 md-card 的父级，并为 ng-click 提供一个虚拟函数来激活效果和一些 CSS 放置列表项中的卡片。这个解决方案有点过头了，但它确实有效。

标记

<div ng-controller="AppCtrl" ng-cloak="" class="carddemoBasicUsage" ng-app="MyApp">
  <md-content class="md-padding" layout-xs="column" layout="row">
    <md-list-item class="clickCard" ng-click="dummy()">
      <md-card md-theme="{{ showDarkTheme ? 'dark-grey' : 'default' }}" md-theme-watch="">
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline">Click me</span>
         </md-card-title-text>
          <md-card-title-media>
            <div class="md-media-lg card-media"></div>
          </md-card-title-media>
        </md-card-title>
      </md-card>
      </md-list-item>
  </md-content>
</div>

CSS

.clickCard .md-button {
  padding: 0 !important;
}
.clickCard md-card {
  margin: 1px;
}

如何在 md-card 悬停时添加 md-ink-ripple 效果

How can I add md-ink-ripple effect on md-card hover

angular-material