JQuery切换光标图标
我有一个WordPress网站，头版上有一个视频。
这个视频自动播放。我希望用户能够通过单击来阻止它。这一点已经在其他地方得到了回答，而且这种做法行之有效。
然而，我想交换光标图标取决于下一次点击将播放还是暂停视频。
目前我有：
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#videointro").hover(function(event) {
if(event.type === "mouseenter") {
jQuery(this).attr("controls", "");
} else if(event.type === "mouseleave") {
jQuery(this).removeAttr("controls");
}
});
});
</script> 和下列组织的css：
#videointro:hover {
cursor:url(images/ButtonPause-01.png), auto;
}...and基本上不知道我能用这个去哪里。
希望有人能把灯照在上面。
干杯，戴夫
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-12-02 09:06:06
最简单的方法是为播放和暂停分配自定义类名，并根据类名分配不同的游标。如果视频播放器处于播放状态，那么将类设置为playing，否则将类设置为paused。
提供自定义游标
.playing{
cursor:url(images/ButtonPause-01.png), auto;
}
.paused{
cursor:url(images/ButtonPlay-01.png), auto;
}您可以使用视频播放器的paused属性检测暂停状态，这将是一个boolen值。这可以在悬停中检查并单击“事件”。
if((jQuery(this)[0].paused))
jQuery(this).addClass("paused").removeClass("playing");
else
jQuery(this).addClass("playing").removeClass("paused");如果视频不播放，则添加paused类，否则添加playing类。
jQuery(document).ready(function() {
jQuery("#videointro").click(function(){
(jQuery(this)[0].paused)?jQuery(this)[0].play():jQuery(this)[0].pause();
if((jQuery(this)[0].paused))
jQuery(this).addClass("paused").removeClass("playing");
else
jQuery(this).addClass("playing").removeClass("paused");
});
jQuery("#videointro").hover(function(event) {
if((jQuery(this)[0].paused))
jQuery(this).addClass("paused").removeClass("playing");
else
jQuery(this).addClass("playing").removeClass("paused");
if(event.type === "mouseenter")
jQuery(this).attr("controls", "");
else if(event.type === "mouseleave")
jQuery(this).removeAttr("controls");
});
});.paused{
cursor:url(http://cur.cursors-4u.net/games/gam-13/gam1232.png), auto;
}
.playing{
cursor:url(http://cur.cursors-4u.net/cursors/cur-1/cur1.png),auto;
}<script type="text/javascript" src="//code.jquery.com/jquery-2.2.2.js"></script>
<video class="playing" autoplay="true" id="videointro" src="http://www.w3schools.com/html/mov_bbb.mp4">
</video>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40936455
复制相关文章
相似问题
从布局目录运行MasterPages
从UIScrollview中删除内容和帧布局指南
Android布局指南
嵌套MasterPages
关于SharePoint 2010的所有内容(控件、WebParts、主题、MasterPages)
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
