Topic: Card Show on Hover

mog5808 pro asked 7 years ago


Hi guys,

In the example below

 

`<!--Card-->
<div class="card">

<!--Card image-->
<div class="view hm-white-slight waves-light" mdbRippleRadius>
<img src="https://mdbootstrap.com/img/Photos/Others/food.jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->

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

<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Card title</h4>
<hr>
<!--Text-->
<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>
</div>
<!--/.Card content-->

<!-- Card footer -->
<div class="card-data">
<ul>
<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>
</ul>
</div>
<!-- Card footer -->

</div>
<!--Card-->`

 

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 7 years ago


Hi,

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;

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

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

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

}

}



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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