Topic: Card Show on Hover
Hi guys,
In the example below
`<!--Card-->
<div class="card">
<!--Card image-->
<div class="view hm-white-slight waves-light" mdbRippleRadius>
<img src="https://mdbcdn.b-cdn.net/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` ?
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) {
}
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No