Question

我有一个非常奇怪的问题：

我有一个页面上有几个视频。当我将鼠标悬停在视频上时，光标会变为自定义播放按钮。当您点击视频并开始播放时，光标会变为暂停按钮（反之亦然）。

除了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/

Answer 1

这是一个解决方法/解决方案，使其在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);
    }
  });
});

Demo

Safari：自定义光标在单击时更改为默认值

1 个答案: