Question

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

Answer 1

目前帮助增加以下课程。只是想知道是否有比这更好的解决方案。

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

2 个答案: