I'm having trouble figuring out how to animate my links on hover with 3 different colors. I attempted using the linear-gradient property but it doesn't seem to be working. Any suggestions on how to proceed?
Below is an example of what I'm attempting to achieve with a single color.
var link = document.querySelector(".dropdown-item");
['mouseover', 'touchstart'].forEach(function (e) {
link.addEventListener(e, function () {
link.classList.add("is-active");
});
});
['mouseleave', 'touchleave'].forEach(function (e) {
link.addEventListener(e, function () {
link.classList.remove("is-active");
})
});li {
list-style: none;
}
.dropdown-item::after {
content: '';
margin: auto;
padding: 0 10px;
height: 2px;
width: 0;
position: relative;
bottom: -10px;
border: 2px solid transparent;
display: block;
transition: 0.3s;
}
.is-active.dropdown-item::after {
width: 100%;
background: #123456;
transition: width 0.3;
}<ul>
<li><a class="dropdown-item" href="#">EXAMPLE</a></li>
</ul>Here's an example of the desired transition effect:
If anyone has any ideas on how to achieve this, I would greatly appreciate your input.
Thank you