如何使用jQuery在输入上重新创建CSS悬停动画，使其在Edge中工作
我有六到九个开关排成一行。每个开关都在悬停时设置动画：旋钮向下滑动，旋钮和轨迹都以纯色或渐变填充。在“边”中，悬停动画不会激发 我对jQuery理解不够，不知道从哪里开始使用jQuery而不是CSS重新创建动画，这样它就可以在Edge中工作 我不知道我需要在CSS代码中留下什么，或者我应该转移到jQuery 我知道问题是Edge除了链接之外不喜欢任何东西，至少我是这么被告知的 如何使用jQuery而不是CSS来实现这一点 我看过其他人的问题和他们收到的答案，但他们都处理图像或链接或简单的东西，而不是输入。我已经准备了一个带有一些注释的代码笔： HTML：如何使用jQuery在输入上重新创建CSS悬停动画，使其在Edge中工作,jquery,html,css,microsoft-edge,jquery-hover,Jquery,Html,Css,Microsoft Edge,Jquery Hover,我有六到九个开关排成一行。每个开关都在悬停时设置动画：旋钮向下滑动，旋钮和轨迹都以纯色或渐变填充。在“边”中，悬停动画不会激发 我对jQuery理解不够，不知道从哪里开始使用jQuery而不是CSS重新创建动画，这样它就可以在Edge中工作 我不知道我需要在CSS代码中留下什么，或者我应该转移到jQuery 我知道问题是Edge除了链接之外不喜欢任何东西，至少我是这么被告知的 如何使用jQuery而不是CSS来实现这一点 我看过其他人的问题和他们收到的答案，但他们都处理图像或链接或简单的东西，而
<!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>
我希望这些开关能像CSS中的开关一样工作，但使用jQuery代替。我希望旋钮向下滑动并填充渐变，轨迹在悬停/鼠标输入时填充纯色，在鼠标输出时还原。IE可能看不到您的输入大小减小到0。 试试这个方法 .开关{ 显示：内联块； 高度：113px； 利润率：10px 23px； 位置：相对位置； 宽度：55px； 溢出：隐藏； } .开关输入{ 位置：绝对位置； 排名：0； 左：0； 身高：100%； 宽度：100%； 不透明度：0.001； z指数：1 } .滑块{ 边框：1px实心cc80ff； 底部：0； 光标：指针； 左：0； 位置：绝对位置； 右：0； 排名：0； -moz跃迁：0.4s； -o过渡：0.4s； -webkit转换：0.4s； 过渡：0.4s； } .滑块：：之前{ 边框：1px实心cc80ff； 底部：60px； 内容：； 高度：43px； 左：5px； 位置：绝对位置； -moz跃迁：0.4s； -o过渡：0.4s； -webkit转换：0.4s； 过渡：0.4s； 宽度：43px； } 输入：悬停+滑块{ 背景色：cc80ff； 背景色：rgba204、128、255、0.8； } 输入：焦点+.滑块{ 盒影：0 1px cc80ff； } 输入：悬停+.滑块：：之前{ 背景图像：-moz线性渐变右下角，cc80ff，e4d8cb，cc80ff； 背景图像：-ms线性渐变右下角，cc80ff，e4d8cb，cc80ff； 背景图像：-o-线性梯度右下角，cc80ff，e4d8cb，cc80ff； 背景图像：-webkit线性渐变右下角，cc80ff，e4d8cb，cc80ff； 背景图像：右下角线性渐变，cc80ff，e4d8cb，cc80ff； -moz变换：translateY54px； -ms变换：translateY54px； -o变换：translateY54px； -webkit转换：translateY54px； 转换：translateY54px； } /*---圆形滑块--*/ .圆滑{ 边界半径：34px； } .slider.round:：before{ 边界半径：50%； }
谢谢，@G-cyr。这种方法可以在边缘触发动画，但是效果是随意的。我可以将鼠标悬停在输入之外，它会意外触发。我可以将鼠标悬停在输入上，它可能会触发，也可能不会触发。如果我将鼠标直接悬停在圆圈的旋钮部分，它会启动，但会很快停止。在轨道中间有一个点，它在悬停中闪烁。有时，当我在圆圈上悬停时，在我将鼠标移动到某个点之前，什么也不会发生。我需要它像其他浏览器一样平滑和可预测。我正在使用Browserstack在Edge上测试它。@BabythBullbell我现在只运行ie11，可能会在标签上设置悬停：焦点无论如何都会放在输入上，否则就要调试，从输入中删除不透明度，以便更好地查看它所处的位置，以调整大小和位置。@BabyThunderball我更新了代码段，使输入成为标签的全宽和全高。告诉我这样是否更好。要触发：hover，元素需要一个大小，而不是不透明度等于0/none。这是你必须注意的一点；谢谢，@G-cyr正在运行IE11！那太好了！我认为没有jQuery我是做不到的！你帮我省了不少麻烦！：@G-Cyrrunninge11有什么理由让你有第二个帐户只用于IE11答案，而不只是用普通帐户回答？
.switch {
display: inline-block;
height: 113px;
margin: 10px 23px;
position: relative;
width: 55px;
}
.switch input {
height: 0;
opacity: 0;
width: 0;
}
.slider {
border: 1px solid #cc80ff;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider::before {
border: 1px solid #cc80ff;
bottom: 60px;
content: "";
height: 43px;
left: 5px;
position: absolute;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-webkit-transition: 0.4s;
transition: 0.4s;
width: 43px;
}
input:hover + .slider {
background-color: #cc80ff;
background-color: rgba(204, 128, 255, 0.8);
}
input:focus + .slider {
box-shadow: 0 0 1px #cc80ff;
}
input:hover + .slider::before {
background-image: -moz-linear-gradient(bottom right, #cc80ff, #e4d8cb, #cc80ff);
background-image: -ms-linear-gradient(bottom right, #cc80ff, #e4d8cb, #cc80ff);
background-image: -o-linear-gradient(bottom right, #cc80ff, #e4d8cb, #cc80ff);
background-image: -webkit-linear-gradient(bottom right, #cc80ff, #e4d8cb, #cc80ff);
background-image: linear-gradient(to bottom right, #cc80ff, #e4d8cb, #cc80ff);
-moz-transform: translateY(54px);
-ms-transform: translateY(54px);
-o-transform: translateY(54px);
-webkit-transform: translateY(54px);
transform: translateY(54px);
}
/* ----- Rounded sliders ----- */
.slider.round {
border-radius: 34px;
}
.slider.round::before {
border-radius: 50%;
}
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend(jQuery.easing, {
easeOutBounce: function(x, t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b
}
}
});
//This bit I understand, but I don't know how this works with CSS or the above.
$('.slider').hover(function() {
$(this).stop().animate({
top: -50
},900, "easeOut");
}, function() {
$(this).stop().animate({
top: 0
}, 900, "easeOut");
});