I would like the links to be underlined when the mouse hovers over it.
Thanks in advance! If you could leave example code that would be awesome. I cannot figure out how to do this from following the documentation here Text - Velo API Reference - Wix.com
$w.onReady(function () {
//removing the underline when the page is ready
removeUnderline();
//removing the underline when not hovering the text
$w('#text1').onMouseOut(()=>{removeUnderline();});
//adding the underline when hovering the text
$w('#text1').onMouseIn(()=>{addUnderline();});
});
function removeUnderline(){
let oldHtmlStr = $w('#text1').html;
let newHtmlStr = oldHtmlStr.replace( /underline/i, 'none');
$w('#text1').html = newHtmlStr;
}
function addUnderline(){
let oldHtmlStr = $w('#text1').html;
let newHtmlStr = oldHtmlStr.replace( /none/i, 'underline');
$w('#text1').html = newHtmlStr;
}
This code will add the underline only when hovering the text element. Note that the hyperlink itself is added to the text element using the editor.
This does not work because my entire list is contained within a single element called #list1 (see image below) so I cannot target the link element specifically.
Even better - the ability to be able to create custom CSS files would solve this and so much more (I have submitted this feature request, as have others). I hope to see this implemented in the future as it would make Wix a powerful competitor in the “online website builder” market. Creating silly JavaScript workarounds like this is a giant waste of time and effort (for both of us) as the solution could be as simple as one line of CSS…
a:hover {text-decoration: underline;}
But I digress…I do greatly appreciate your help on this issue and hope we can come to a solution. I am just getting frustrated after several hours of trying to make this work when the solution should be much more simple and wanted to voice my concerns to the people of Wix.
The code you wrote for adding the underline only when hovering the text element worked great; however, I cannot figure out how to repeat this same code for 10 different text boxes on the same page. I tried using a wild card, but was unsuccessful. Any chance you could revisit your code posted above and assist me with this issue.
Also, once this code is in place, the hyperlink that is edited through the text element editor…no longer works.
Hi Tal,
I tried following your instructions, copied your code and added the correct text element to it, but nothing’s happening when I test it in the Preview mode. I’ve got a repeater with 3 containers and each container has a text element where I’ve listed some items that I’ve added a hyperlink to. Now I’d just need for the items to be underlined when hovered over so the user realizes there’s a link behind it.
I’m not sure how to use the onItemReady function.
Do you have any advice?
Thank you,
Shiran