0

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.

enter image description here

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);
}
Hiroki
  • 3,893
  • 13
  • 51
  • 90
  • 1
    you are trying to trigger a hover event, right? ... might want to check: https://stackoverflow.com/questions/11074815/jquery-trigger-hover-on-anchor – Akber Iqbal Dec 01 '18 at 03:23

1 Answers1

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');
Aiden Kaiser
  • 155
  • 1
  • 9