如何在md卡悬停上添加md-ink-ripple效果

我需要在悬停在md卡上时添加悬停效果。这种效果在md-list-item（在悬停该项目时）上工作得很好。我需要在md卡上有类似的效果。我怎样才能做到这一点？如何在md卡悬停上添加md-ink-ripple效果

2016-07-05 Lalit Rane

你想，你在MD-列表项或只是悬停效果点击时，你得到的连锁反应？ –

我需要告诉用户该md卡是可点击的。简单的悬停效果就好。我编辑了这个问题来反映这一点。点击卡上的墨迹波纹可以正常工作。您的评论帮助我找到了解决方案。我在悬停时添加了盒子阴影，并且达到了目的。 –

下面是使用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; 
}

来源

2016-07-19 09:42:33

谢谢，这正是我正在寻找的。 –

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

.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; 
}

来源

2016-07-05 10:41:29

如何在md卡悬停上添加md-ink-ripple效果

回答

相关问题