Hi,
I have a kind of card with a Heart empty or filled depending of the variable's value (false or true) inside a Link. When I clicked, the link is still underlined when the mouse is out of the area.
I can't upload the sample because it is more the 5Mb but here some screenshots and a link https://hapi-dev.outsystemsenterprise.com/Guillaume_Sandbox_DontDelete/Platform?_ts=638387759636120129. I tried with an event OnMouseLeave or OnMouseOut containing a JS.
var area = document.getElementById($parameters.FavouriteArea);
area.addEventListener('onmouseleave', () => {
area.style.textDecoration = "none";
})
So I would like to not have the link underlined when not hovering the link anymore. It would be good to have only the text underlined and not the icon. But the icon should still be clickable as it is for the text for accessibility purposes.
To remove the underline when is not hovering, just do this
a:focus {
text-underline: unset;
} "It would be good to have only the text underlined and not the icon" - this is difficult, because the underline is being applied to everything that is under the <a> link, which means you would need to separate things to make it work. I would recommend just to not have underline and for that i would also create a class too be inserted in the links you don't want link neither on hover or on focus by doing this for example.
Example: Class created: "no-link", where you just need to put this class int he link style classes
a:focus.no-link {
text-decoration: unset;
}
a:hover.no-link {
Let us know if this helped you
Kind regards,
Márcio
Hi @Guillaume Le Devin ,
you can remove the focus selector from css so it will not be underlined when you are not hovering it
Hope it helps.
Already answered! :) ^^
Yeah i just saw it after posting!
Thank you for your answer.
It is working but if you clicked and hover again the area, it does underline anymore apart if I clicked somewhere else in the screen and hover again. This is not the best for UX. Would you have any idea why it behave that way and how to avoid this?
https://hapi-dev.outsystemsenterprise.com/Guillaume_Sandbox_DontDelete/Platform_1
Ok, I found. I just needed to add a rule for hover.
.back { display: flex; justify-content: start; align-items: center;}
.back > a:first-child { text-decoration: none; flex: 0 1 100%;}
.back > a:last-child:focus { text-decoration: unset;}
.back > a:last-child:hover { text-decoration: underline;}
Thanks for your help :-)
I finally found the answer. Here the second part of the solution for those who would be interested by:
.container > a:focus:not(:hover) {
text-decoration: none;
.container > a:focus:hover {
text-decoration: underline;