I am facing an issue where I have a row of six to nine switches with the <input type="checkbox"> element, and each switch animates when hovered over. In this animation, the knob slides down, and both the knob and track fill with colors or gradients. However, the hover animation doesn't work in Edge browser.
Since I lack sufficient knowledge of jQuery, I am unsure how to recreate this animation using jQuery instead of CSS to ensure compatibility with Edge.
I am confused about which part of the CSS code needs to be transferred to jQuery for this animation to function correctly.
It seems that Edge has limitations with handling hover events on elements other than links. This further complicates my attempt to make it work using jQuery.
How can I implement this functionality using jQuery for the switches, rather than relying solely on CSS?
I have reviewed other queries and responses related to similar issues, but they mostly deal with images or links, not input elements like switches. Here is the codepen link with additional comments: https://codepen.io/akajezebel/pen/PrQoJe
The HTML structure:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body>
<div class="switch-row">
<label class="switch">
<a href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer">
<input class="knob" type="checkbox">
<span class="slider round"></span>
</a>
</label>
</div>
<div class="switch-row">
<label class="switch">
<a href="https://www.twitter.com/" target="_blank" rel="noopener noreferrer">
<input class="knob" type="checkbox">
<span class="slider round"></span>
</a>
</label>
</div>
</body>
</html>
The existing CSS styles:
(CSS code provided)I am referencing the following jQuery example from http://jsfiddle.net/q61n8gxv/2/, hoping to gain insights into making this transition from CSS to jQuery smoother.
(jQuery code provided)My goal is to replicate the CSS behavior of the switches using jQuery. The desired outcome includes the knob sliding down, filling with gradients upon hover/mouseenter, and reverting back to the initial state upon mouseout.