如何在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效果

回答

相關問題