Underline part of text on hover

Ask the community
,
1

Hi Wixers,
I want to have specific words in a text box to underline on hover.
If possible, also to link a word with an .svg object to also show on hover.
similar to this:

I found this css example on:

https://stackoverflow. com/questions/40711894/underline-part-of-a-link-on-hover-of-whole-link/40711926

“You can put the part you want to be underlined in a span.”

a .ca:hover { 	text-decoration:underline; }
<a href="#" style="text-decoration:none">ABC<span class="ca">CD</span></a>

Any advice on how to apply it to my text object?
Thanks!
Nadav

2

The easiest path to the same effect is creating all the text elements separated, and use the onMouseIn() and onMouseOut() methods of such elements.

$w.onReady(() => {

    $w('#txtNose, #txtEar, #txtMouth').onMouseIn(({ target }) => {
        //Change those IDs above to the ones you are going to manipulate
        let text = target.id.replace('txt', 'line')
        highlightLine(text)
        //You can put here the image you want to display when the mouse is in
    })
    $w('#txtNose, #txtEar, #txtMouth').onMouseOut(({ target }) => {
        let text = target.id.replace('txt', 'line')
        $w(`#${text}`).hide()

    })
})

function highlightLine(text) {
    let lines = ['lineNose', 'lineEar', 'lineMouth']
    lines.forEach((line) => {
        line === text ?
            $w(`#${line}`).show() :
            $w(`#${line}`).hide()
    })
}
3

Thank you @Bruno Prado
I have a lot of text so creating a separate box for each word would be inefficient.
What I did is creating a container box for the mouse in and a line object for the underlying.
The problem is that the line objects keep changing location slightly Evan that I do not change anything. Another problem is that each browser randers the text slightly differently such that it is not aligned well with the line object.

I am sure the right way to do it is to modify the text itself but not sure how to do it on the wix editor.
Cheers,
Nadav

4

Hi there,

The website you shared is using CSS to style the ( a ) tag, which is not possible on Wix as Wix doesn’t support CSS.

You can however use the text html property to add an underline to the linked part when the mouse hovers over the text element.

const regular_style = `<p style="font-size:14px;">Visit our <a href="https://nasriya.net" target="_blank">Nasriya</a> website</p>`;

const hover_style = `<p style="font-size:14px;">Visit our <a href="https://nasriya.net" target="_blank"><span style="text-decoration:underline;">Nasriya</span></a> website</p>`;

$w('#text').html = regular_style;
$w('#text').onMouseIn(() => $w('#text').html = hover_style);
$w('#text').onMouseOut(() => $w('#text').html = regular_style);

Hope this helps~!
Ahmad

5

@nadavari one thing you can do is to create a box on top of the text you want to highlight and hide the line underneath and create a onMouseIn() on the box itself.

Try this: Code Testing - Underline

6

I tried reproducing in CSS using JQuery and it is not that simple to recreate. The best way would be the way I did using different boxes and elements.

7

@bwprado Using different boxes and elements is what I did but because text is rendered differently in each browser they would not align properly.
I ended up converting each text box to svg and reupload as an svg object, no very efficient but it works.
Thanks for the help!

8

Hi @ahmadnasriya , Thanks for the help!
It is good to know about this option. But for me I will need to also be able to modify the colors and other properties.
I ended up converting each text box to svg and reupload as an svg object, no very efficient but it works.