我正在编写一个旨在从台式机和平板电脑上使用的网站.当从桌面访问它时,我希望屏幕的可点击区域点亮:hover效果(不同的背景颜色等).使用平板电脑,没有鼠标,所以我不想要任何悬停效果.
问题是,当我在平板电脑上点击一些东西时,浏览器显然有某种"隐形鼠标光标",它移动到我点击的位置,然后将其留在那里 - 所以我刚刚点击的东西点亮了悬停效果,直到我点击其他东西.
我在使用鼠标时如何获得悬停效果,但在使用触摸屏时抑制它们？
如果有人想提出建议,我不想使用用户代理嗅探.同样的设备可能同时具有触摸屏和鼠标(今天可能不常见,但将来会更加如此).我对该设备不感兴趣,我对它目前的使用方式感兴趣:鼠标或触摸屏.
我已经尝试挂钩touchstart,touchmove和touchend事件,并呼吁preventDefault()对所有的人,这确实抑制"隐形鼠标"的一些时间; 但是如果我在两个不同的元素之间来回快速点击,经过几次点击它就会开始移动"鼠标光标"并点亮悬停效果 - 这就像我preventDefault并不总是很荣幸.除非必要,否则我不会厌倦你的细节 - 我甚至不确定这是正确的方法; 如果有人有更简单的解决方案,我会全力以赴.
编辑:这可以用沼泽标准的CSS :hover重现,但这里有一个快速的repro供参考.
<style>
.box { border: 1px solid black; width: 150px; height: 150px; }
.box:hover { background: blue; }
</style>
<div class="box"></div>
<div class="box"></div>
如果你鼠标悬停在其中任何一个框上,它将获得我想要的蓝色背景.但是如果你点击其中任何一个盒子,它也会得到一个蓝色背景,这是我试图阻止的事情.
我还在这里发布了一个示例,它可以完成上述操作并且还可以挂钩jQuery的鼠标事件.您可以使用它来查看点击事件也会触发mouseenter,mousemove以及mouseleave.
请考虑这个CSS代码:
a { color: #ffcc00; }
a:hover { color: #ccff00; }
这个HTML代码:
<a href="#" id="link">Link</a>
<button id="btn">Click here</button>
最后,这个JS代码:
$("#btn").click(function() {
$("#link").trigger("hover");
});
我想让我的链接使用其伪类:单击按钮时悬停.我试图触发像mousemove,mouseenter,hover等事件,但任何人都可以.请注意,我想强制使用我的CSS伪类:悬停规范,而不是使用类似的东西:
$("#link").css("color", "ccff00");
有人知道我该怎么做？非常感谢.
我的应用程序中有一个按字母顺序排列的滚动条(ASB),大多数智能手机都在他们的Contacts应用程序中.
现在,我的手指在ASB上滚动到特定项目没有问题touchstart touchend click etc...但是,我在智能手机上捕获hover或mouseover事件时遇到问题.
我试过touchstart touchswipe touchend mouseenter mousemove或hover没有运气.
任何建议表示赞赏.
我正在试图找出一种模拟移动设备悬停效果的方法.我一直在搜索,但似乎没有工作.
我试图获得移动悬停效果的元素是一个在悬停时改变颜色的链接.
我有一个在悬停时有一些css3动画的网页,当用户触摸这些元素时,我想让它在iPad(和任何支持触摸的设备)上工作.
这是我的代码:
HTML:
<div id="headBlock">
<a id="arm"></a>
<div id="head">
<div id="blink"></div>
<div id="lid"></div>
<div id="man"></div>
<a id="man-arm"></a>
</div>
</div>
JS:
//arm
$('#arm').hover(function(){
$(this).removeAttr('style').css('bottom','244px');
$(this).addClass('hover_effect');
}, function(){
$(this).removeClass('hover_effect');
});
//man arm
$('#man').hover(function(){
$('#man-arm').removeAttr('style');
$('#man-arm').addClass('hover_effect');
}, function(){
$('#man-arm').removeClass('hover_effect');
});
您可以看到,当鼠标输入元素时,我删除了样式,然后应用样式并添加css类'hover_effect',当鼠标离开时,我删除'hover_effect'类.
如何在触摸设备上实现相同的功能？click事件没有回调,因此在单击发生后我无法删除'hover_effect'类.我尝试了mousedown和mouseup但它没有用.我搜索了stackoverflow,我发现了这个如何使用触摸启用浏览器来模拟悬停？但它没有任何效果.
任何想法的人？
谢谢
毛罗