Link hover effect

Topic: Link hover effect

jouvrard pro asked 6 years ago

I try MDBootstrap Free before buy it and I have au problem: I know how to change the background color of columns, etc..., but how can I do to have link background hover effect?

I tried for example with:
<a href="#" class="col-12 py-3 pink">My link</a>

My link background is pink, but with no color change when the mouse cursor si hover it.
I saw the "Bootstrap hover effect" page but it seems very "complicated" juste to have a hover effect on a link, so I thought a simpler solution existed. Maybe not?

Maybe it's a ridiculous question but I can't find the solution after a good search.

Thanks!

Add comment

jouvrard pro answered 6 years ago

0 0 Best answer

Thank you, it will be very usefull. :)

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Hi, for now, you can use code from this snippet: https://mdbootstrap.com/snippets/jquery/marta-szymanska/53439 :) Best, Marta

Add comment

jouvrard pro answered 6 years ago

0 0 Best answer

Ok, thank you. It would be great to have this possibility in a future version, for example reduce brightness for hover on a "a" tag. :)

Marta Wierzbicka staff commented 6 years ago

Hi, for sure we will add that possibility in a future version.

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Hi, we don't have a good solution of hover effect just for text. You can use this solution: CSS:

.test {
transition: .4s;
}
.test:hover {
transition: .4s;
background-color: rgba(3, 169, 244, 0.7) ;
}

HTML: <a href="#" class="col-12 py-3 test">My link</a> Best, Marta

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 jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

jouvrard

Pro User 898Support score
46Questions 70Answers 11Snippets