Card Show on Hover

Topic: Card Show on Hover

mog5808 pro asked 6 years ago

Hi guys,

In the example below

` <div class="card">

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

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

<div class="card-body">

<h4 class="card-title">Card title</h4>
<hr>

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

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

</div>
`

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` ?

Add comment

Edyta Dabrowska free answered 6 years ago

0 0 Best answer

<p>Hi,</p>
<p>Here is the solution I can suggest you. Feel free to ask or fix it.</p>
<p>app.component.html - added: <code><div class="card" #thisCard></code> to the main card div;</p>
<p>styles.scss - added: <code>visibility: hidden;</code> for the button you want to be hidden when not on hover;</p>
<p>app.component.ts - added to path: <code>import { Component, ViewChild, HostListener, ElementRef, Renderer } from '@angular/core';</code></p>
<p> <code><br />
export class AppComponent {</p>
<p>  @ViewChild('thisCard') thisCard;</p>
<p>  @HostListener('mouseenter')<br />
    onMouseEnter() {<br />
    this._renderer.setElementStyle(this.thisCard.nativeElement.firstElementChild.nextElementSibling, 'visibility', 'visible');<br />
    }</p>
<p>  @HostListener('mouseleave')<br />
    onMouseLeave() {<br />
      this._renderer.setElementStyle(this.thisCard.nativeElement.firstElementChild.nextElementSibling, 'visibility', 'hidden');<br />
    }</p>
<p>  constructor(private _el: ElementRef, private _renderer: Renderer) {</p>
<p>  }</p>
<p>}<br />
</code></p>

Please insert min. 20 characters.

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) {
  }

}

Add comment

Write

Create snippet

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

mog5808

Pro User 26Support score
15Questions 21Answers 0Snippets