Having hover effects on HTML element without actually hovering via jQuery/JavaScript?

Question

What I've been trying is to hover an HTML element via jQuery/JavaScript.

Here we have an <a>, which reads "Beer".

This will have an underline when the mouse pointer is hovering it in the following way.

The line is created of the :before selector.

I'm wondering if it's possible to hover any of those <a> with JS, so that one of those <a> is hovered without the user actually hovering it.

Any advice will be appreciated.

Just in case, here is CSS which created the underline. I made this by referring to this tutorial.

.nav-link{
    position: relative;
    text-decoration: none;
}

.nav-link:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: white;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.nav-link:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

you are trying to trigger a hover event, right? ... might want to check: stackoverflow.com/questions/11074815/… — Akber Iqbal
– Akber Iqbal, Commented Dec 1, 2018 at 3:23

Aiden Kaiser · Accepted Answer · 2018-12-01 03:23:46Z

1

You could make them seperate classes and use .addClass()

.nav-link-hover {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

and in your jQuery

$('.nav-link').addClass('nav-link-hover');

answered Dec 1, 2018 at 3:23

Aiden Kaiser

1691 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aiden Kaiser Over a year ago

And if you want to remove the class after you are done, use .removeClass('nav-link-hover')

Collectives™ on Stack Overflow

Having hover effects on HTML element without actually hovering via jQuery/JavaScript?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related