[英]Deactivate css-applied hover-style on click and reapply it when mouse moves n px
I have two different background images that change depending on hover like so: 我有两个不同的背景图像,它们根据悬停而变化,如下所示:
.klass {background: url(a.jpg);}
.klass:hover {background: url(b.jpg);}
Is it possible to deactivate css-applied hover-style (ie stop displaying b.jpg) on click and not reapply the style until mouse has moved eg 5px? 是否可以在单击时停用css应用的悬停样式(即停止显示b.jpg),并且在鼠标移动例如5px之前不重新应用样式?
Add another class: 添加另一个类:
.klass, .klass-clicked {background: url(a.jpg);}
.klass:hover {background: url(b.jpg);}
Then your click handler can change the class of the element to klass-clicked
. 然后,单击处理程序可以将元素的类更改为
klass-clicked
。 You can then bind a mousemove
handler that checks whether the mounse has moved 5px, and then change the class back to klass
. 然后,您可以绑定
mousemove
处理程序,该处理程序检查该鼠标是否已移动5px,然后将类更改回klass
。
Set window.myMouseTracker to true when hovering the object, false when your unhover function is done. 悬停对象时,将window.myMouseTracker设置为true,完成悬停功能时将false设置为false。 It is initially not set, but undefined which doesn't call your custom function either until your element was hovered.
最初未设置,但未定义,直到将鼠标悬停在元素上之前,它都不会调用自定义函数。
// global mouse tracking
jQuery(document).ready(function(){
$(document).mousemove(function(e){
if (window.myMouseTracker)
{
// call to your tracking function
}
});
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.