Topic: Card Show on Hover

mog5808 pro asked 5 years ago

Hi guys,

In the example below


<div class="card">

<!--Card image-->
<div class="view hm-white-slight waves-light" mdbRippleRadius>
<img src="" class="img-fluid" alt="">
<div class="mask"></div>
<!--/.Card image-->

<a class="btn-floating btn-action waves-light" mdbRippleRadius><i class="fa fa-chevron-right"></i></a>

<!--Card content-->
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<!--/.Card content-->

<!-- Card footer -->
<div class="card-data">
<li><i class="fa fa-clock-o"></i> 05/10/2015</li>
<li><a href="#"><i class="fa fa-comments-o"></i>12</a></li>
<li><a href="#"><i class="fa fa-facebook"> </i>21</a></li>
<li><a href="#"><i class="fa fa-twitter"> </i>5</a></li>
<!-- Card footer -->



How can i make

`<a class="btn-floating btn-action waves-light" mdbRippleRadius><i class="fa fa-chevron-right"></i></a>`

appear on hover of the card the `mdbootstrap angular way` ?


Edyta Dabrowska free answered 5 years ago


Here is the solution I can suggest you. Feel free to ask or fix it.

app.component.html - added: <div class="card" #thisCard> to the main card div;

styles.scss - added: visibility: hidden; for the button you want to be hidden when not on hover;

app.component.ts - added to path: import { Component, ViewChild, HostListener, ElementRef, Renderer } from '@angular/core';

export class AppComponent {

@ViewChild('thisCard') thisCard;

onMouseEnter() {
this._renderer.setElementStyle(this.thisCard.nativeElement.firstElementChild.nextElementSibling, 'visibility', 'visible');

onMouseLeave() {
this._renderer.setElementStyle(this.thisCard.nativeElement.firstElementChild.nextElementSibling, 'visibility', 'hidden');

constructor(private _el: ElementRef, private _renderer: Renderer) {



Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No