我有一个很奇怪的问题:
我有一个页面,上面有一些视频。当我将鼠标悬停在视频上时,光标会变为自定义播放按钮。当您点击视频并开始播放时,光标会变为暂停按钮(反之亦然)。
此过程在除 Safari 之外的所有浏览器中都能完美运行。当我将鼠标悬停在视频上时会显示自定义光标,但是当我单击视频时,自定义光标会显示几分之一秒,但随后会变为默认光标。当我移动光标时,它再次变为自定义光标。所以问题只出在点击事件上。
这是我的代码:
jQuery:
$(document).ready(function() {
$(".container-video").click(function(){
($(this)[0].paused)?$(this)[0].play():$(this)[0].pause();
if(($(this)[0].paused))
$(this).addClass("paused").removeClass("playing");
else
$(this).addClass("playing").removeClass("paused");
});
});
CSS:
.paused {
cursor: url(/images/play-button.cur), url(/images/play-button.cur), auto;
}
.playing {
cursor: url(/images/pause-button.cur), url(/images/pause-button.cur), auto;
}
有没有人遇到过类似的问题?这是 Safari 中的错误还是我做错了什么?
编辑: 做了一个例子的快速jsfiddle: https://jsfiddle.net/du1Lzwra/
最佳答案
这是使其在 Safari 中工作的解决方法/解决方案。只是在一定时间内添加了settimeout。更改它们可能会停止工作...
$(document).ready(function() {
$(".container-video").click(function() {
$(this)[0].paused ? $(this)[0].play() : $(this)[0].pause();
if ($(this)[0].paused) {
$(this).addClass("paused");
setTimeout(() => {
$(this).removeClass("playing");
}, 269);
} else {
setTimeout(() => {
$(this).addClass("playing");
$(this).removeClass("paused")
}, 481);
}
});
});
关于jquery - Safari:自定义光标在单击时更改为默认值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50659972/