Topic: Hover animation without JS
Can i add MDB animations on hover without JS?
In any case, what would be the best solution to implement such an effect, for example on an MDB fa icon?
Thanks in advance,
Michael
Michael pro commented 7 years ago
I would like to have an existing MDB animation play on hover over a fa icon, additionally to the one playing on page load/user scroll reveal. Specifically in this case the swing animation on a <i class="fa fa-pencil wow swing green-text" data-wow-iteration="2"></i> element.
Michael pro commented 7 years ago
As I wrote it is not about wow. That's working just fine. Admittedly, my question title might be a bit misleading. Again one by one: On the page there is a fa-pencil icon. What i want is: User moves the mouse over the fa-pencil element (aka hover!) -> swing animation starts playing What's the best way to implement that? Even with JQuery, how would i do that?
oh okay. So we won't need wow for it.
First solution - pure hover :
<i class="fa fa-pencil swing green-text"></i>
It is enough to call animation on hover event :
.fa-pencil:hover {animation: swing 1s linear .5s infinite;}
Second solution - jQuery (we just toggle animation on mouseenter/mouseleave events) :
$('.fa-pencil').on('mouseenter mouseleave', function (evt) {
if (evt.type === 'mouseenter') {
$(this).css("animation", "swing 1s linear .5s infinite")
} else {
$(this).attr('style', '');
}
});
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No